HTML canvas addColorStop () method
Examples
Define a gradient from black to white, a rectangle fill style:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support addColorStop () method.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
addColorStop () method specifies the gradient object color and position.
addColorStop () method createLinearGradient () or createRadialGradient () used together.
Note: You can call addColorStop () method multiple times to change the gradient.If you are not a gradient object, using this method, the gradient will not be visible. In order to obtain visible gradient, you need to create at least one color.
| JavaScript syntax: | gradient.addColorStop (stop, color); |
|---|
Parameter Value
| 参数 | 描述 |
|---|---|
| stop | 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 |
| color | 在stop位置显示的 CSS 颜色值 。 |
More examples
Examples
It is defined by a plurality of gradient addColorStop () method:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
try it"
HTML canvas Reference Manual