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