【canvas】线性渐变的设置

线性渐变是一个对象:

语法:

var grd=ctx.createLinearGradient(x0,y0,x1,y1);

参数：x0，y0起始坐标,x1，y1结束坐标

··············································································

grd.addColorStop(0,"black");

参数1：添加一个渐变的颜色，第一个参数介于0.0与1.0之间的值,
表示渐变中开始与结束之间的位置

参数2:颜色

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas width="600"  height="300" >
        
    </canvas>
</body>
    <script type="text/javascript">
    var canvas=document.querySelector("canvas");
    canvas.style.border="solid 1px #000";
    var c=canvas.getContext('2d');
    var grd=c.createLinearGradient(0,0,100,100);
    //创建线性渐变的对象
    grd.addColorStop(0,"black");
    //添加一个渐变的颜色，第一个参数介于0.0与1.0之间的值,
    //表示渐变中开始与结束之间的位置
    grd.addColorStop(.5,"red");
    grd.addColorStop(1,"white");
    c.fillStyle=grd;//关键点把渐变设置到填充样式
    c.fillRect(50,50,100,100);



    </script>
</html>

示例结果:

 

圆形线性渐变:

var grd=ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)

参数详解:

x0:渐变的开始圆的x坐标

y0:渐变的开始圆的y坐标

ro:开始圆的半径

x1:渐变的结束圆x坐标

y1:渐变的结束圆的y坐标

r1:结束圆的半径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas width="600"  height="300" >
        
    </canvas>
</body>
    <script type="text/javascript">
    var canvas=document.querySelector("canvas");
    canvas.style.border="solid 1px #000";
    var c=canvas.getContext('2d');
    var grd=c.createRadialGradient(50,50,2,50,50,50);
    //创建圆形渐变的对象
    grd.addColorStop(0,"rgb(255,0,0)");
    //添加一个渐变的颜色，第一个参数介于0.0与1.0之间的值,
    //表示渐变中开始与结束之间的位置
    grd.addColorStop(.5,"rgb(0,255,0)");
    grd.addColorStop(1,"rgb(0,0,255)");
    c.fillStyle=grd;//关键点把渐变设置到填充样式
    c.fillRect(0,0,300,300);



    </script>
</html>

代码示例结果:

 

posted @ 2017-08-14 10:54  丰study  阅读(456)  评论(0)    收藏  举报