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