HTML canvas(画布)createLinearGradient()方法

  • createLinearGradient()方法定义和用法

    createLinearGradient()方法创建一个线性渐变对象。
    渐变可用于填充矩形,圆形,线条,文本等。
    提示:使用此对象作为strokeStyle或fillStyle属性的值。
    提示:使用addColorStop()方法指定不同的颜色,以及在渐变对象中放置颜色的位置。

  • createLinearGradient()方法浏览器支持

    Internet Explorer Chrome FireFox Safari Opera
    9.0(含)以上 支持 支持 支持 支持
  • createLinearGradient()方法语法

    context.createLinearGradient(x0,y0,x1,y1);

  • createLinearGradient()方法实例

    定义从黑色到白色的渐变(从左到右),作为矩形的填充样式:

    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 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);
    
    尝试一下

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

    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(0.5,"red");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);
    
    尝试一下
  • createLinearGradient()方法参数值

    类型 描述
    x0 渐变起点的x坐标
    y0 渐变起点的y坐标
    x1 渐变终点的x坐标
    y1 渐变终点的y坐标
  • createLinearGradient()方法相关页面

    HTML教程:HTML脚本

    HTML教程:HTML画布