[html] 学习笔记-Canvas图形绘制处理
使用Canvas API 可以将一个图形重叠绘制在另外一个图形上，也可以给图形添加阴影效果。
1、Canvas 图形组合
通过 globalCompositeOperation = 属性 来指定重叠效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script> 7 function draw(id){ 8 var canvas = document.getElementById(id); 9 var context = canvas.getContext("2d"); 10 var oprtns = new Array( 11 "source-atop", 12 "source-in", 13 "source-out", 14 "source-over", 15 "destination-atop", 16 "destination-in", 17 "destination-out", 18 "destination-over", 19 "lighter", 20 "copy", 21 "xor" 22 ); 23 i=8; 24 context.fillStyle = "blue"; 25 context.fillRect(10,10,60,60); 26 context.globalCompositeOperation = oprtns[i]; 27 context.beginPath(); 28 context.fillStyle = "red"; 29 context.arc(50, 50, 30, 0, Math.PI*2,false); 30 context.fill(); 31 } 32 </script> 33 </head> 34 <body onload="draw('canvas')"> 35 <canvas id="canvas" width="500" height="500"></canvas> 36 </body> 37 </html>
2、给图形绘制阴影
相关属性：shadowOffsetX,shadowOffsetY,shadowOffsetColor,shadowBlur
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 function draw(id){ 8 var canvas = document.getElementById(id); 9 var context = canvas.getContext("2d"); 10 context.fillStyle = "#eeeeef"; 11 context.fillRect(0,0,500,500); 12 context.shadowOffsetX = 10; 13 context.shadowOffsetY = 10; 14 context.shadowColor = "rgba(255,100,100,0.9)"; 15 context.shadowBlur = 7.5; 16 17 context.translate(0,50); 18 for(var i=0;i<3;i++){ 19 context.translate(70,100); 20 create5Start(context); 21 context.fill(); 22 } 23 } 24 function create5Start(context){ 25 var dx = 100; 26 var dy = 0; 27 var s = 50; 28 context.beginPath(); 29 context.fillStyle = "rgba(255,0,0,0.5)"; 30 var x = Math.sin(0); 31 var y = Math.cos(0); 32 var dig = Math.PI /5 *4; 33 for(var i=0; i<5;i++){ 34 x = Math.sin(i*dig); 35 y = Math.cos(i*dig); 36 context.lineTo(dx+x*s,dy+y*s); 37 } 38 context.closePath(); 39 } 40 </script> 41 </head> 42 <body onload="draw('canvas')"> 43 <canvas id="canvas" width="500" height="500"></canvas> 44 </body> 45 </html>
3、使用图像
有3中绘制方式：
context.drawImage(img,x,y)
context.drawImage(img,x,y,w,h)
context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
1 <html> 2 <head> 3 <title></title> 4 <script> 5 function draw(id){ 6 var canvas = document.getElementById(id); 7 var context = canvas.getContext("2d"); 8 context.fillStyle = "#eeeeef"; 9 context.fillRect(0,0,500,500); 10 image = new Image(); 11 image.src = "1.jpg"; 12 image.onload = function(){ 13 drawImage(context,image); 14 } 15 } 16 function drawImage(context, image){ 17 // context.drawImage(image, 100,100); 18 // context.drawImage(image, 0,0,200,200); 19 context.drawImage(image,100,100,200,200,100,100,100,100); 20 } 21 </script> 22 23 </head> 24 <body onload="draw('canvas')"> 25 <canvas id="canvas" width="500" height="500"></canvas> 26 </body> 27 </html>