The fillStyle is now a gradient instead of a color. We create the gradient by calling createLinearGradient of the drawing context. You need to give two points and in between those points the gradient will be applied. We use the starting point (0, 0) and the end point (150, 100).
We then specify colors using addColorStop. The first argument tells us how far the color is located away from the starting point. This is a value from 0 to 1 where 0 means at the starting point and 1 means at the end point. So a value of 0 means the color that you specify is for the starting point, a value of 0.5 means half way in between both given coordinates and 1 means at the end point. We're giving the starting point the color red and the image to base64 end point the color yellow. We are using two colors for our gradient but you can use more than two if you want. Note that these coordinates are independent of your text and if you decide to change the location of your text it'll probably look different because it will then lookup the color information at that location. When you're using a gradient for fillStyle you're changing the colors for all fill commands (fillText, fillRect, etc) so you need to play a bit with the coordinates of your gradient and your text if it doesn't look the way you want it. It is really starting to look fancy now. We have one more trick up our sleeve and that is using transformations to rotate the text. To rotate the text just add the rotate command. The argument is the angle of clockwise rotation in radians so use a negative value to rotate counterclockwise: We now have our final result: a fancy text with a gradient, a shadow and a bit of image to base64 rotation!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2018
Categories |