Home > Web Front-end > HTML Tutorial > html property fillStyle that sets or returns the color gradient or pattern used to fill the painting

html property fillStyle that sets or returns the color gradient or pattern used to fill the painting

黄舟
Release: 2017-11-04 09:24:11
Original
3086 people have browsed it

Example

Define a rectangle filled with blue:

html property fillStyle that sets or returns the color gradient or pattern used to fill the painting

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
Copy after login

Browser Support

Internet Explorer 9, Firefox, Opera, Chrome and Safari support fillStyle attribute.

Note: Internet Explorer 8 and earlier does not support the element.

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;
##Attribute value

ValueDescriptioncolorThe CSS color value that indicates the drawing fill color. The default value is #000000gradientThe gradient used to fill the plotpatternThe pattern object used to fill the drawing
Object (linear or radial)
More examples

Example 1

Define a gradient from top to bottom as the fill style of the rectangle:

html property fillStyle that sets or returns the color gradient or pattern used to fill the painting

JavaScript:

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);
Copy after login

Example 2

Definition from left to The gradient on the right, as the fill style of the rectangle:

html property fillStyle that sets or returns the color gradient or pattern used to fill the painting

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);
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template