canvas相关api

1.线性径变：ctx.createLinearGradient()；

  var grd=ctx.createLinearGradient(0,0,170,0);
        grd.addColorStop(0,'black');
        grd.addColorStop(.5,'red');
        grd.addColorStop(1,'white');
        ctx.fillStyle=grd;
        ctx.fillRect(100,100,500,500);

2.阴影：

<script>
    (function(){
        var canvas = document.querySelector( '#cavsElem' );
        var ctx = canvas.getContext( '2d' );
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = "1px solid #000";
        ctx.fillStyle='rgba(255,0,0,.9)';
        ctx.shadowColor='blue';
        ctx.shaodwBlur='10';//shadowBlur 属性设置或返回阴影的模糊级数
        ctx.shadowOffsetX=10;
//      shadowOffsetX 属性设置或返回形状与阴影的水平距离。
//      shadowOffsetX=0 指示阴影位于形状的正下方。
//      shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。
        ctx.shadovOffsetY=10;
        ctx.fillRect(100,100,100,100);
    }());
</script>

3.径向渐变：

<script>
    (function() {
        var canvas = document.querySelector('#cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = "1px solid #000";
        var rlg=ctx.createRadialGradient(300,300,10,300,300,200);//渐变开始圆的x,y坐标，半径，和渐变结束时候的状态；
        rlg.addColorStop(0,'teal');
        rlg.addColorStop(.4,'navy');
        rlg.addColorStop(1, 'purple');
        ctx.fillStyle=rlg;
        ctx.fillRect(100,100,500,500);
    }());
</script>

4.画布的移动，伸缩，旋转，透明度，状态的保存；

<script>
    (function(){
        var canvas = document.querySelector( '#cavsElem' );
        var ctx = canvas.getContext( '2d' );
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = "1px solid #000";
        // ctx1： 状态1
        ctx.fillStyle = 'red';
        ctx.fillRect(10, 10, 100, 100);
        //状态 只是 上下文的一些样式的设置。
        ctx.save(); // 把当前的上下文的状态保存起来 //  状态1
        // 把当前画布移动到 200,200位置
        ctx.translate( 200, 200); //把整个画布位移到200,200
        ctx.rotate(30 * Math.PI / 180 ); //把整个画布旋转30度
        ctx.scale(2, 2); //把整个画布放大x和y方向各2倍
        ctx.globalAlpha = .3;//设置透明度           // 状态2：
        ctx.fillStyle = 'green';
        ctx.strokeStyle = 'purple';
        ctx.moveTo(0, 0);
        ctx.lineTo(400, 0);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, 400);
        ctx.stroke();
        ctx.fillRect(10, 10, 40, 40);
        ctx.restore(); // 把上一次保存的ctx状态，还原。
        //当前ctx：回到  状态1
        ctx.fillRect(400, 400, 100, 100);
    }());
</script>

 5.将canvas转成一个图片：

<script>
  console.log('canvas.toDataURL('image/jpeg',.6);
</script>

6.把canvas输出到另外一张图片上去；

// 把canvas输出到一张图片上去
// var img = document.getElementById('imgId');
// img.src = canvas.toDataURL('image/png', .5);
//把一个画布渲染到另外一个画布上。
ctx2.drawImage(canvas1, 0, 0);