html5图像组合

一图像组合

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>