经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件
来源:cnblogs  作者:后来喵  时间:2021/4/6 10:07:03  对本文有异议

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个参数用于设置切片后的目标显示位置

       和大小。

  ⑷ 代码示例

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

  

2.图片裁切

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

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

  语法:ctx.clip();

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

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

  代码示例:

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

  

3.图像样式

  ⑴ 图像平铺

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

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

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

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

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

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

  代码示例:

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

  ⑵ 图像阴影

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

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

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

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

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

  代码示例:

  1. <body>
  2. <canvas id="canvasImage" width="1500" height="800"></canvas>
  3. <script>
  4. var canvas=document.getElementById('canvasImage');
  5. var ctx=canvas.getContext('2d');
  6. // 创建图片对象
  7. var img=new Image();
  8. img.src='../Images/rotation01.jpg';
  9. // 创建图片加载事件
  10. img.onload=function () {
  11. ctx.shadowOffsetX=15;
  12. ctx.shadowOffsetY=10;
  13. ctx.shadowBlur=7;
  14. ctx.shadowColor='#333';
  15. ctx.drawImage(img, 10,10);
  16. </script>
  17. </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”对象。

    代码示例:

  1. <body>
  2. <canvas id="canvasImage" width="1500" height="800"></canvas>
  3. <script>
  4. var canvas=document.getElementById('canvasImage');
  5. var ctx=canvas.getContext('2d');
  6. // 创建图片对象
  7. var img=new Image();
  8. img.src='../Images/rotation01.jpg';
  9. // 创建图片加载事件
  10. img.onload=function () {
  11. var imageData=ctx.getImageData(80,120,300,315);  //获取图像的“ImageData”对象。
  12. console.log(imageData);
  13. console.log(typeof imageData);
  14. console.log(imageData.data);
  15. console.log(typeof imageData.data);
  16. }
  17. </script>
  18. </body>

  

 

  ⑵ 创建ImageData对象

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

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

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

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

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

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

    代码示例:

  1. <body>
  2. <canvas id="canvasImage" width="1500" height="800"></canvas>
  3. <script>
  4. var canvas=document.getElementById('canvasImage');
  5. var ctx=canvas.getContext('2d');
  6. // 创建图片对象
  7. var img=new Image();
  8. img.src='../Images/rotation01.jpg';
  9. // 创建图片加载事件
  10. img.onload=function () {
  11.  
  12. // 获取ImageData对象
  13. var imageData=ctx.getImageData(80,120,300,315); //获取ImageData对象。
  14. console.log(imageData);
  15. console.log(typeof imageData);
  16. console.log(imageData.data);
  17. console.log(typeof imageData.data);
  18.  
  19. // 创建ImageData对象1
  20. var imgData1=ctx.createImageData(imageData); //创建尺寸相同的ImageData对象
  21. for (var i=0;i<imgData1.data.length;i+=4){
  22. imgData1.data[i+0]=158;
  23. imgData1.data[i+1]=139;
  24. imgData1.data[i+2]=10;
  25. imgData1.data[i+3]=255;
  26. }
  27. ctx.putImageData(imgData1,500,120); //显示创建并填充完成的ImageData对象。
  28.  
  29. // 创建ImageData对象2
  30. var imgData2=ctx.createImageData(150,158); //创建指定尺寸的ImageData对象
  31. for (var j=0;j<imgData2.data.length;j++){
  32. var m=Math.random();
  33. imgData2.data[j]=255*m;
  34. /* imgData2.data[j+1]=255*m;
  35. imgData2.data[j+2]=255*m;
  36. imgData2.data[j+3]=255;*/
  37. }
  38. ctx.putImageData(imgData2,880,120); //显示创建并填充完成的ImageData对象。
  39. }
  40. </script>
  41. </body>

  

  ⑶ putImageData()方法

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

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

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

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

    代码示例:

  1. <body>
  2. <canvas id="canvasImage" width="1500" height="800"></canvas>
  3. <script>
  4. var canvas=document.getElementById('canvasImage');
  5. var ctx=canvas.getContext('2d');
  6. // 创建图片对象
  7. var img=new Image();
  8. img.src='../Images/rotation01.jpg';
  9. // 创建图片加载事件
  10. img.onload=function () {
  11.  
  12. // 获取ImageData对象
  13. var imageData=ctx.getImageData(80,120,300,315); //获取ImageData对象。
  14. console.log(imageData);
  15. console.log(typeof imageData);
  16. console.log(imageData.data);
  17. console.log(typeof imageData.data);
  18. for (var k=0;k<imageData.data.length;k+=4){
  19. imageData.data[k]=255-imageData.data[k];
  20. imageData.data[k+1]=255-imageData.data[k+1];
  21. imageData.data[k+2]=255-imageData.data[k+2];
  22. imageData.data[k+3]=255;
  23. }
  24. ctx.putImageData(imageData,1080,120);
  25.  
  26. }
  27. </script>
  28. </body>

  

5.绑定事件

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

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

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

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

  代码示例:

  1. <body>
  2. <canvas id="canvasImage" width="1500" height="800"></canvas>
  3. <script>
  4. var canvas=document.getElementById('canvasImage');
  5. var ctx=canvas.getContext('2d');
  6. // 创建图片对象
  7. var img=new Image();
  8. img.src='../Images/rotation01.jpg';
  9. // 创建图片加载事件
  10. img.onload=function () {
  11.  
  12. // canvas绑定事件
  13. canvas.onclick=function (e) {
  14. e = e||window.event;
  15. console.log(e); //canvas敲击事件对象包含了大量点击位置的信息。
  16. var clickX=e.offsetX;
  17. var clickY=e.offsetY;
  18. if (clickX>=240&&clickX<=320){
  19. if (clickY>=360&&clickY<=430){
  20. alert('请不要乱摸!');
  21. }
  22. }
  23. }
  24. }
  25. </script>
  26. </body>

  说明:

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

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

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

原文链接:http://www.cnblogs.com/husa/p/14576926.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号