Home > Article > Web Front-end > html property fillStyle that sets or returns the color gradient or pattern used to fill the painting
Example
Define a rectangle filled with blue:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#0000ff"; ctx.fillRect(20,20,150,100);
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support fillStyle attribute.
Note: Internet Explorer 8 and earlier does not support the
Definition and Usage
The fillStyle property sets or returns the color, gradient, or pattern used to fill the painting.
Default value: | #000000 |
JavaScript syntax: | context.fillStyle =color|gradient|pattern; |
Description | |
The CSS color value that indicates the drawing fill color. The default value is #000000 | |
The gradient used to fill the plot | Object (linear or radial) |
The pattern object used to fill the drawing |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);Example 2Definition from left to The gradient on the right, as the fill style of the rectangle: JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
The above is the detailed content of html property fillStyle that sets or returns the color gradient or pattern used to fill the painting. For more information, please follow other related articles on the PHP Chinese website!