• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • addColorStop()

    实例

    定义一个从黑到白的渐变,作为矩形的填充样式:

    YourbrowserdoesnotsupporttheHTML5canvastag.

    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);

    浏览器支持

    Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 addColorStop()方法。
    注意:Internet Explorer 8 及之前的版本不支持<canvas>元素。

    定义和用法

    addColorStop()方法规定渐变对象中的颜色和位置。

    addColorStop()方法与createLinearGradient()或createRadialGradient()一起使用。

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

    JavaScript 语法:gradient.addColorStop(stop,color);

    参数值

    参数描述
    stop介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
    colorstop位置显示的CSS 颜色值。

    上篇:createRadialGradient()

    下篇:lineCap