欢迎光临
我的个人博客网站

WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件

1.图像绘制

  在canvas中渲染图片,使用“drawImage()”方法。

  drawImage()方法有三种形态:基础引入、图片缩放、切片。

  ⑴ 基础引入

    语法:ctx.drawImage(img,x,y);

    说明:参数img是一个image或canvas对象,(x,y)是图像左上角的坐标。

  ⑵ 图片缩放

    语法:ctx.drawImage(img,x,y,width,height);

    说明:在形态⑴的基础上增加了“width”和“height”两个参数,用于设置图像

       缩放后的宽度和高度。

  ⑶ 切片

    语法:ctx.drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);

    说明:该种形态下,第一参数img与之前形态的意义相同,后面8个参数中,前4个参数

       用于指定图像源的切片位置和大小,后4个参数用于设置切片后的目标显示位置

       和大小。

  ⑷ 代码示例

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {              ctx.drawImage(img,10,10);           //图片基础引入             ctx.drawImage(img,560,10,200,320);      //图像缩放             ctx.drawImage(img,80,120,300,315,780,10,200,208);     //切片处理              }     </script> </body> 

  WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件

2.图片裁切

  此处的裁切与上面所说的切片不同,区别在于裁切仅仅是在图像源上裁下指定路径大小的图片,

  并不做任何处理,比如 位移、缩放等都保留与源图像一致。

  语法:ctx.clip();

  说明:该方法不需要任何参数,但在执行clip之前先要绘制好裁切路径(一个封闭区域),在

     执行clip之后需要使用drawImage()方法引入图像。

  代码示例:

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {             ctx.beginPath();             ctx.arc(230,278,150,0,2*Math.PI,false);      //绘制圆形裁切路径。             // ctx.rect(80,120,300,315);                   //绘制矩形裁切路径。             ctx.clip();             ctx.drawImage(img,10,10);             }     </script> </body> 

  WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件

3.图像样式

  ⑴ 图像平铺

  语法:ctx.createPattern(image,type);

  说明:该方法接受2个参数,参数image是一个image对象,或一个canvas对象;

     参数type用于设置图像布局的类型,包括 repeat(完全平铺)、repeat-x(横向平铺)、

     repeat-y(纵向平铺)、no-repeat(不平铺)。

     该方法返回一个对象,赋予“fillStyle”后,即可进行填充绘制。

  注意:为确保进行图像绘制之前,图片加载已经完成,需要使用“onload”事件!

  代码示例:

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {             var imgPtn=ctx.createPattern(img,'repeat');     //创建图像样式对象             ctx.fillStyle=imgPtn;             ctx.fillRect(10,10,500,600);}     </script> </body> 

  ⑵ 图像阴影

  语法:ctx.shadowOffsetX||Y=value;  //设置水平或垂直方向阴影大小

     ctx.shadowBlur=value;    //设置阴影模糊程度

     ctx.shadowColor=’color’;    //设置阴影颜色

  说明:与Pattern设置不同,Shadow的样式都是针对“ctx”对象进行设置的,

     引入图片时使用“drawImage()”方法。

  代码示例:

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {             ctx.shadowOffsetX=15;             ctx.shadowOffsetY=10;             ctx.shadowBlur=7;             ctx.shadowColor='#333';             ctx.drawImage(img, 10,10);     </script> </body> 

4.canvas像素

  ImageData对象是canvas用于存储真实像素数据重要对象,包含三个只读属性:width、height、data。

  其中,data属性返回值也是一个对象,包含着RGBA格式的整型数据,即图像的真实像素数据。

  data对象中存储的每个像素,都包括4个信息,即RGBA值:R-红色、G-绿色、B-蓝色、A-alpha通道。

  每个RGBA值都介于“0~255”之间,并以数组的形式存储于data属性中。

  ⑴ 获取ImageData对象

    通过 getImageData() 方法获取ImageData对象。

    语法:ctx.getImageData(x,y,w,h);

    说明:getImageData()方法接受4个参数,表示以(x,y)为左上角坐标,以(w,h)为宽和高,获取该

       矩形区域内图像的“ImageData”对象。

    代码示例:

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {             var imageData=ctx.getImageData(80,120,300,315);  //获取图像的“ImageData”对象。             console.log(imageData);             console.log(typeof imageData);             console.log(imageData.data);             console.log(typeof imageData.data);             }     </script> </body> 

  WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件

 

  ⑵ 创建ImageData对象

    通过 createImageData() 方法创建ImageData对象,该方法有两种形态。

    语法:ctx.createImageData(w,h);    //创建指定尺寸(像素)的ImageData对象。

       ctx.createImageData(ImageData);  //创建与另一个ImageData对象尺寸相同的

                        新的ImageData对象,但不会复制图像数据!

    说明:createImageData()方法仅用于创建对象的区域,创建完成后需要向ImageData对象

       的data属性中添加像素数据,然后使用“putImageData()”方法呈现出来。

    代码示例:

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {          //  获取ImageData对象             var imageData=ctx.getImageData(80,120,300,315);     //获取ImageData对象。             console.log(imageData);             console.log(typeof imageData);             console.log(imageData.data);             console.log(typeof imageData.data);          //  创建ImageData对象1             var imgData1=ctx.createImageData(imageData);     //创建尺寸相同的ImageData对象             for (var i=0;i<imgData1.data.length;i+=4){                 imgData1.data[i+0]=158;                 imgData1.data[i+1]=139;                 imgData1.data[i+2]=10;                 imgData1.data[i+3]=255;             }             ctx.putImageData(imgData1,500,120);     //显示创建并填充完成的ImageData对象。              //  创建ImageData对象2             var imgData2=ctx.createImageData(150,158);     //创建指定尺寸的ImageData对象             for (var j=0;j<imgData2.data.length;j++){                 var m=Math.random();                 imgData2.data[j]=255*m; /*                imgData2.data[j+1]=255*m;                 imgData2.data[j+2]=255*m;                 imgData2.data[j+3]=255;*/             }             ctx.putImageData(imgData2,880,120);     //显示创建并填充完成的ImageData对象。             }     </script> </body> 

  WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件

  ⑶ putImageData()方法

    该方法用于将指定的ImageData对象放回到画布上。

    语法:ctx.putImageData(imageData,x,y);

    说明:putImageData()方法必有参数为3个,第1个是要放回画布的ImageData对象,

       (x,y)表示ImageData对象放回画布的位置对应的左上角的坐标。

    代码示例:

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {          //  获取ImageData对象             var imageData=ctx.getImageData(80,120,300,315);     //获取ImageData对象。             console.log(imageData);             console.log(typeof imageData);             console.log(imageData.data);             console.log(typeof imageData.data);             for (var k=0;k<imageData.data.length;k+=4){                 imageData.data[k]=255-imageData.data[k];                 imageData.data[k+1]=255-imageData.data[k+1];                 imageData.data[k+2]=255-imageData.data[k+2];                 imageData.data[k+3]=255;             }             ctx.putImageData(imageData,1080,120);              }     </script> </body> 

  WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件

5.绑定事件

  由于canvas具有上屏即像素画的特性,所以添加在canvas上的文字、图形、按钮等内容节点无法

  不能通过 query 相关方法获取到,也就不能直接在该节点上绑定事件。

  在canvas中添加事件时只能绑定在canvas元素节点上,以点击事件为例,如果要在点击某个按钮

  或图形时触发某个事件,就必须定位该节点在canvas中的位置区域,然后针对该区域添加事件。

  代码示例:

<body>     <canvas id="canvasImage" width="1500" height="800"></canvas>     <script>         var canvas=document.getElementById('canvasImage');         var ctx=canvas.getContext('2d');     //  创建图片对象         var img=new Image();         img.src='../Images/rotation01.jpg';     //  创建图片加载事件         img.onload=function () {          //  canvas绑定事件             canvas.onclick=function (e) {                 e = e||window.event;                 console.log(e);     //canvas敲击事件对象包含了大量点击位置的信息。                 var clickX=e.offsetX;                 var clickY=e.offsetY;                 if (clickX>=240&&clickX<=320){                     if (clickY>=360&&clickY<=430){                         alert('请不要乱摸!');                     }                 }             }         }     </script> </body> 

  说明:

    canvas敲击事件返回的对象,包含了鼠标触点相对于视口、屏幕、页面、画布……的各种

    坐标位置,通常在定位鼠标敲击区域时,使用相对于canvas画布的位置对象最便于操作。

    offsetX和offsetY表示相对于最近一个canvas的左上角的水平距离和垂直距离。

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏