time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 详解HTML5的Canvas像素处理常用接口

详解HTML5的Canvas像素处理常用接口

时间:2012-12-02 23:06 点击:1467次 字体:[ ]




内容概要:本文通过简单的代码实例,以及略猥琐的图片demo,展示了canvas在图像像素数据操作方面的常用接口。至于如何利用这几个接口实现更复杂的效果,则会在后续章节里继续讲述。

一、canvas图片填充; 2、设置/获取canvas图片数据; 3、创建canvas图片数据;4、关于imageData.data的一点补充; 5、写在后面

 

一、canvas图片填充

  1. /**  
  2.  * @description  
  3.  * @param {Number} x 图像起始绘制点距离canvas最左侧的距离  
  4.  * @param {Number} y 图像起始绘制点距离canvas最顶部的距离  
  5.  * @param {Number} width 最终图像在canvas上绘制出来的宽度  
  6.  * @param {Number} height 最终图像在canvas上绘制出来的高度  
  7. */ 
  8. context.drawImage(image, x, y, width, height) 

demo_01如下

  1. <canvas id="draw_image_canvas" style="background:#ccc;"></canvas>   
  2.  
  3.  
  4. function $(id) { return document.getElementById(id); }  
  5. function getImage(url, callback){  
  6.     var img = document.createElement('img');  
  7.     img.onload = function(){  
  8.         callback && callback(this);  
  9.     };  
  10.     img.src = url;  
  11.     document.body.appendChild(img);  
  12. }  
  13.  
  14. function drawImage(){  
  15.     var url = 'xiangjishi.png';  
  16.     var canvas = $('draw_image_canvas');  
  17.     var context = canvas.getContext('2d');  
  18.     getImage(url, function(img){  
  19.         canvas.width = img.width;  
  20.         canvas.height = img.height;  
  21.  
  22.         var offsetX = 20;  
  23.         var offsetY = 20;  
  24.         var drawWidth = img.width/4;  
  25.         var drawHeight = img.height/4;  
  26.  
  27.         context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);  
  28.     });  
  29. }  
  30. drawImage();   

demo说明:加载xiangjishi.png,加载完成后,从相对于画布左上角坐标(0, 0)处开始,将xiangjishi.png绘制在画布上,效果如下:

详解HTML5的Canvas像素处理常用接口_www.fengfly.com

看到这里,可能对于 context.drawImage(image, x, y, width, height) 里四个参数的含义理解还不是特别清楚,可以简单把几个参数修改下看看效果:

  1. var offsetX = 20;  
  2. var offsetY = 20;  
  3. var drawWidth = img.width/2;  
  4. var drawHeight = img.height/2;  
  5.  
  6. context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight); 

修改后的demo效果如下,结合上面API的说明,应该不难理解四个参数所代表的含义

详解HTML5的Canvas像素处理常用接口_www.fengfly.com

context.drawImage(image, x, y, width, height)



本文地址 : http://www.fengfly.com/plus/view-210661-1.html
标签: HTML5 canvas
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: