canvas相关api

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

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

2.阴影：

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

3.径向渐变：

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

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

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

 5.将canvas转成一个图片：

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

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

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