Menu
I am trying to draw a line which is a gradient. How is that possible in canvas?
383
To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).
The createLinearGradient() method creates a linear gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc. Tip: Use this object as the value to the strokeStyle or fillStyle properties.
To draw a line on a canvas, you use the following steps: First, create a new line by calling the beginPath() method. Second, move the drawing cursor to the point (x,y) without drawing a line by calling the moveTo(x, y) . Finally, draw a line from the previous point to the point (x,y) by calling the lineTo(x,y) method.
There is no special property for this; you simply use the background or background-image property and define your gradient in its value. You can create both linear and radial gradients this way.
Yes. Example:
// linear gradient from start to end of line var grad= ctx.createLinearGradient(50, 50, 150, 150); grad.addColorStop(0, "red"); grad.addColorStop(1, "green"); ctx.strokeStyle = grad; ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(150,150); ctx.stroke(); See it in action here:
http://jsfiddle.net/9bMPD/
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
