HTML and CSS Reference
In-Depth Information
style the drawing, you can specify the fillStyle and strokeStyle and maybe even
define the width of the line using lineWidth , as shown in this example:
context.strokeStyle = "blue";
context.fillStyle = "red";
context.lineWidth = 10;
context.beginPath();
context.lineTo(200,10);
context.lineTo(200,50);
context.lineTo(380,10);
context.closePath();
context.stroke();
context.fill();
As you saw in a few previous examples, you can change color by setting the fillColor
property. In addition to the CSS color values, you can also set the fillColor to a gradient
object. A gradient object can be created by using createLinearGradient() or
createRadialGradient() .
The following example creates a simple linear gradient that will be applied to a rectangle
using the createLinearGradient( x1 , y1 , x2 , y2 ) method. The gradient is positioned at
10,150 and is set to go 200 pixels in both directions.
var lg = context.createLinearGradient(10,150,200,200);
Next, the gradient colors are added using the addColorStop() method. This specifies
a color and the offset position in the gradient where the color should occur. The offset must
be between 0 and 1.
lg.addColorStop(0,"#B03060");
lg.addColorStop(0.75,"#4169E1");
lg.addColorStop(1,"#FFE4E1");
Of course, you could use the rgba CSS function to create a gradient with transparency
as well. Finally, the fillColor is set to the gradient. Here is the complete code snippet,
followed by a visual example:
var lg = context.createLinearGradient(10,150,200,200);
lg.addColorStop(0,"#B03060");
lg.addColorStop(0.5,"#4169E1");
lg.addColorStop(1,"#FFE4E1");
context.fillStyle = lg;
context.beginPath();
context.rect(10,150,200,200);
context.fill();
Search WWH ::




Custom Search