一 图像组合
1.绘制阴影
在绘制阴影效果时，需要使用Canvas的多个属性配合完成
shadowBlur设置阴影的迷糊级数
shadowOffsetX设置形状与阴影的水平距离
shadowOffsetY设置形状与阴影的垂直距离
shadowColor设置阴影的颜色
<head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" height="300" width="400"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx= c.getContext("2d"); ctx.save(); //保存上下文对象 ctx.shadowBlur=10; //设置阴影的模糊级别 ctx.shadowOffsetX=20; //设置阴影与矩阵的水平距离 ctx.shadowOffsetY=20; //设置阴影与矩阵的垂直距离 ctx.shadowColor="black"; //设置阴影颜色 ctx.fillStyle="blue"; //设置填充颜色 ctx.beginPath(); //设置阴影颜色 ctx.fillRect(20,20,200,200); //绘制一个矩形 ctx.restore(); //获取保存的上下文对象 ctx.fillStyle="black"; //重新设置填充颜色 ctx.beginPath(); //设置阴影颜色 ctx.fillRect(300,20,200,200) ; //绘制第二个矩形
</script>
</body>
</html>
显示：
shadowOffsetX和shadowOffsetY的值对阴影的效果？
shadowOffsetX和shadowOffsetY表示阴影与对象的水平和垂直距离，如果值是正数，阴影显示在图像的右边和下边；如果值是负 数，阴影显示在对象的左边和上边。
2.透明效果
主要通过设置globalAlpha属性控制重叠图形的透明度，该值介于0和1之间，0表示完全透明，1表示完全不透明
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="myCanvas" height="300" width="400"></canvas> 9 <script> 10 var c=document.getElementById("myCanvas"); 11 var ctx= c.getContext("2d"); 12 ctx.fillStyle="red"; //设置填充颜色 13 ctx.fillRect(20,20,300,200); //绘制不透明矩形框 14 ctx.globalAlpha=0.2 //设置透明度 15 ctx.fillStyle="blue"; //设置填充颜色 16 ctx.fillRect(100,100,300,200);//绘制第二个矩形框 17 ctx.fillStyle="green"; //设置填充颜色 18 ctx.fillRect(150,150,200,200);//绘制第三个矩形框 19 20 </script> 21 </body> 22 </html>
显示：
二 使用图像
1.插入图形
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>4.6.1.html</title> 6 </head> 7 <body> 8 <canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas> 9 <script type="text/javascript"> 10 var c=document.getElementById("myCanvas"); 11 var cxt=c.getContext("2d"); 12 var img=new Image(); //创建一个图片数组 13 img.src="img01.png"; //设置图片路径 14 img.onload=function(){ //为图片加载一个onload事件 15 cxt.drawImage(img,0,0); //加载图片 16 }; 17 </script> 18 </body> 19 </html>
onload事件：会在图像或者页面加载完成后立即发生
2.平铺图像
需要用到Canvas的createPattern函数，该函数有两个参数，一个是需要平铺的图像，二是以哪种方式进行平铺，repeat（在水平和垂直方向重复），repeat-x（在水平方向重复），repeat-y（在垂直方向重复），no-repeat（不重复）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>4.6.2.html</title> 6 </head> 7 <body> 8 <canvas id="myCanvas" width="600" height="400">您的浏览器不支持canvas标签</canvas> 9 <script type="text/javascript"> 10 var image = new Image(); 11 var canvas = document.getElementById("myCanvas"); 12 var ctx = canvas.getContext("2d"); 13 image.src = "002.png"; 14 image.onload = function () { 15 var ptrn = ctx.createPattern(image, "repeat"); 16 ctx.fillStyle = ptrn; 17 ctx.fillRect(0, 0, 600, 600); 18 }; 19 20 </script> 21 </body> 22 </html>
3.裁剪图像
该函数的多个重载方法
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>4.6.3.html</title> 5 </head> 6 <body> 7 <canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas> 8 <script type="text/javascript"> 9 var c=document.getElementById("myCanvas"); 10 var cxt=c.getContext("2d"); 11 var img=new Image(); 12 img.src="img01.png"; 13 img.onload=function(){ 14 cxt.drawImage(img,100,100,100,100,0,0,100,100); 15 }; 16 </script> 17 </body> 18 </html>
4.像素级操作
根据各点像素颜色分配的不同，呈现出不同的图像
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>4.6.4.html</title> 6 </head> 7 <body> 8 <canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas> 9 <script type="text/javascript"> 10 var c=document.getElementById("myCanvas"); 11 var ctx=c.getContext("2d"); 12 var img=new Image(); 13 img.src="img01.png"; 14 img.onload=function(){ 15 ctx.drawImage(img,0,0); 16 var imgData=ctx.getImageData(0,0,c.width,c.height); 17 // 反转颜色 18 for (var i=0;i<imgData.data.length;i+=4) { 19 imgData.data[i]=255-imgData.data[i]; 20 imgData.data[i+1]=255-imgData.data[i+1]; 21 imgData.data[i+2]=255-imgData.data[i+2]; 22 imgData.data[i+3]=255; 23 } 24 ctx.putImageData(imgData,0,0); 25 }; 26 </script> 27 </body> 28 </html>
