AddColorStop() | HTML<canvas>方法

定义与用法

• addColorStop() 方法规定渐变对象中的颜色和位置。
• addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。

提示：您可以多次调用 addColorStop() 方法来改变渐变。如果您不对渐变对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。

语法格式

gradient.addColorStop(stop,color);

示例代码

<script>
    var c = document.getElementById("myCanvas1");
    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);
</script>

效果展示：

亲自试试

浏览器支持

方法
AddColorStop()	Yes	Yes	Yes	Yes	Yes

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 addColorStop() 方法。

提示：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

参数值

更多实例

<script>
    var c = document.getElementById("myCanvas2");
    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);
</script>

效果展示：

亲自试试