canvas线性变换、颜色和样式选择
1、应用不同的线型
ctx.lineWidth = value; 线条的宽度，默认为1
ctx.lineCap = type; 设置端点样式， type默认为butt,可选值round,square,butt
ctx.lineJoin = type; 设置连接处样式，type默认为miter，可选值round，bevel，miter
ctx.miterLimit = value; 设置绘制交点的方式，miterLimit属性的作用是斜面的长度设置一个上线，默认为10，当斜面的长度达到线条宽度的10倍时，就会变为斜角，如果lineJoin属性值为round或bevel时，miterLimit属性无效。
a、ctx.lineCap
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 function draw(){ 17 var ctx = document.getElementById('myCanvas').getContext('2d'); 18 19 var lineCap = ['butt','round','square']; 20 //绘制参考线 21 ctx.strokeStyle = 'red'; 22 ctx.beginPath(); 23 ctx.moveTo(10,10); 24 ctx.lineTo(10,150); 25 ctx.moveTo(150,10); 26 ctx.lineTo(150,150); 27 ctx.stroke(); 28 //绘制直线段 29 ctx.strokeStyle = 'blue'; 30 for( var i=0; i<lineCap.length; i++){ 31 ctx.lineWidth = 20; 32 ctx.lineCap = lineCap[i]; 33 ctx.beginPath(); 34 ctx.moveTo(10,30+i*50); 35 ctx.lineTo(150,30+i*50); 36 ctx.stroke(); 37 } 38 39 } 40 </script> 41 </head> 42 <body> 43 <div id="div1"> 44 <canvas id="myCanvas" width="300" height="300"></canvas> 45 </div> 46 </body> 47 </html>
效果展示：
b、ctx.lineJoin
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 function draw(){ 17 var ctx = document.getElementById('myCanvas').getContext('2d'); 18 19 var lineJoin = ['round','bevel','miter']; 20 ctx.strokeStyle = 'red'; 21 22 for( var i=0; i<lineJoin.length; i++){ 23 ctx.lineWidth = 20; 24 ctx.lineJoin = lineJoin[i]; 25 ctx.beginPath(); 26 ctx.moveTo(10+i*150,30); 27 ctx.lineTo(100+i*150,30); 28 ctx.lineTo(100+i*150,100); 29 ctx.stroke(); 30 } 31 32 } 33 </script> 34 </head> 35 <body> 36 <div id="div1"> 37 <canvas id="myCanvas" width="600" height="300"></canvas> 38 </div> 39 </body> 40 </html>
效果展示：
c、miterLimit
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 function draw(){ 17 var ctx = document.getElementById('myCanvas').getContext('2d'); 18 ctx.translate(30,40); 19 for( var i=0; i<10; i++){ 20 ctx.strokeStyle = '#FF5D43'; 21 ctx.lineWidth = 10; 22 ctx.lineJoin = 'miter'; 23 ctx.miterLimit = i*10; 24 ctx.beginPath(); 25 ctx.moveTo(10,i*30); 26 ctx.lineTo(100,i*30); 27 ctx.lineTo(10,i*33); 28 ctx.stroke(); 29 } 30 31 } 32 </script> 33 </head> 34 <body> 35 <div id="div1"> 36 <canvas id="myCanvas" width="300" height="400"></canvas> 37 </div> 38 </body> 39 </html>
效果显示：
2、绘制线性变化
ctx.createLinearGradient(x1,y1,x2,y2); x1、y1为渐变的起点， x2，y2为渐变的终点
使用addColorStop(position,color)方法进行上色，
eg：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 function draw(){ 17 var ctx = document.getElementById('myCanvas').getContext('2d'); 18 var lingrad = ctx.createLinearGradient(0,0,0,200); 19 lingrad.addColorStop(0,'#f00'); 20 lingrad.addColorStop(1/7,'#f90'); 21 lingrad.addColorStop(2/7,'#ff0'); 22 lingrad.addColorStop(3/7,'#0f0'); 23 lingrad.addColorStop(4/7,'#0ff'); 24 lingrad.addColorStop(5/7,'#00f'); 25 lingrad.addColorStop(6/7,'#f0f'); 26 lingrad.addColorStop(1,'#f00'); 27 ctx.fillStyle = lingrad; 28 ctx.strokeStyle = lingrad; 29 ctx.fillRect(10,10,200,200); 30 } 31 32 </script> 33 </head> 34 <body> 35 <div id="div1"> 36 <canvas id="myCanvas" width="300" height="400"></canvas> 37 </div> 38 </body> 39 </html>
3、绘制径向渐变
要绘制径向变化，首先要使用createRadialGradient方法创建canvasGradient。然后即可使用addColorStop方法定义色标的位置并进行上色。
ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); 其中x1,y1,r1定义一个为以（x1,y1)为坐标，半径为r1的圆，x2,y2,r2定义一个为以（x2,y2)为坐标，半径为r2的圆，
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 function draw(){ 17 var ctx = document.getElementById('myCanvas').getContext('2d'); 18 var radgrad = ctx.createRadialGradient(55,55,20,100,100,90); 19 radgrad.addColorStop(0,'#fff'); 20 radgrad.addColorStop(0.5,'#f00'); 21 radgrad.addColorStop(1,'#000'); 22 23 ctx.fillStyle = radgrad; 24 ctx.fillRect(10,10,200,200); 25 } 26 27 </script> 28 </head> 29 <body> 30 <div id="div1"> 31 <canvas id="myCanvas" width="300" height="400"></canvas> 32 </div> 33 </body> 34 </html>
4、绘制图案
在多数绘图软件中都有填充图案这个功能，在canvas中，有 createPattern 方法来实现图案效果。
ctx.createPattern(image,type);
其中参数image为要引用的image对象或另一个canvas对象，type是所引用对象的平铺类型，如：repeat、repeat-x， repeat-y，no-repeat必须为下面的字符串值之一。
创建图案的步骤与创建渐变有些类似，需要首先创建出一个pattern，然后再赋予其fillStyle属性或strokeStyle属性。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 function draw(){ 17 var ctx = document.getElementById('myCanvas').getContext('2d'); 18 var img = new Image(); 19 img.src = 'butterf.png'; 20 img.onload = function(){ 21 //创建图案 22 var prtn = ctx.createPattern(img,'repeat'); 23 ctx.fillStyle = prtn; 24 ctx.fillRect(0,0,600,600); 25 }; 26 27 } 28 29 </script> 30 </head> 31 <body> 32 <div id="div1"> 33 <canvas id="myCanvas" width="500" height="500"></canvas> 34 </div> 35 </body> 36 </html>
5、设置图片的透明度
使用globalAlpha可以设置图形的透明度，改方法适合为大量图形设置相同的透明度。 除此之外，还可以通过设置色彩透明度的参数来为图形设置不同的透明度。
即rgba(r,g,b,a);
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width:300px; height: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 17 function draw(){ 18 var c = document.getElementById('myCanvas'); 19 var ctx = c.getContext('2d'); 20 ctx.translate(180,20); 21 22 for(var i=0; i<50; i++){ 23 ctx.save(); 24 ctx.transform(0.95,0,0,0.95,30,30); 25 ctx.rotate(Math.PI/12); 26 ctx.beginPath(); 27 ctx.fillStyle = 'rgba(255,0,0,'+(1-(i+10)/40)+')'; 28 ctx.arc(0,0,50,0,Math.PI*2,true); 29 ctx.closePath(); 30 ctx.fill(); 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <div id="div1"> 37 <canvas id="myCanvas" width="300" height="300"></canvas> 38 </div> 39 </body> 40 </html>
6、创建阴影
在canvas中创建阴影效果，需要用到下面这4个属性：shadowOffsetX（阴影的水平偏移）、shadowOffsetY（阴影的垂直偏移）、shadowBlur（阴影羽化的程度）和shadowColor（阴影的颜色），默认为黑色，可以添加透明度。用法如下：
ctx.shadowOffsetX = float;
ctx.shadowOffsetY = float;
ctx.shadowBlur = float;
ctx.shadowColor = color;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width:300px; height: 300px;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 17 function draw(){ 18 var ctx = document.getElementById('myCanvas').getContext('2d'); 19 //设置阴影 20 ctx.shadowOffsetX = 3; //水平偏移 21 ctx.shadowOffsetY = 8; //垂直偏移 22 ctx.shadowBlur = 2; //羽化程度 23 ctx.shadowColor = 'rgba(255,0,0,0.5)'; 24 //绘制矩形 25 ctx.fillStyle = '#3cf'; 26 ctx.fillRect(20,20,300,60); 27 ctx.fill(); 28 29 //绘制文本 30 ctx.font = '40px 微软雅黑'; 31 ctx.fillStyle = '#fff'; 32 ctx.fillText('HTML5+CSS3',30,64); 33 } 34 </script> 35 </head> 36 <body> 37 <div id="div1"> 38 <canvas id="myCanvas" width="400" height="300"></canvas> 39 </div> 40 </body> 41 </html>
