免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1346 | 回复: 0

canvas教程 (三) 插入图片 [复制链接]

论坛徽章:
0
发表于 2011-12-22 08:54 |显示全部楼层

drawImage 方法允许在 canvas 中插入其他图像
( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂,可以有3个、5个或9个参数

3个参数:最基本的 drawImage使用方法。一个参数指定图像位置,另两个参数设置图像在 canvas中的位置。
5个参数:中级的 drawImage 使用方法,包括上面所述3个参数,加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
9个参数:最复杂 drawImage 杂使用方法,包含上述5个参数外,另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

下面是上述三个使用方法的例子:

  • // Three arguments: the element, destination (x,y) coordinates.   
  • context.drawImage(img_elem, dx, dy);   
  • // Five arguments: the element, destination (x,y) coordinates, and destination     
  • // width and height (if you want to resize the source image).   
  • context.drawImage(img_elem, dx, dy, dw, dh);   
  • // Nine arguments: the element, source (x,y) coordinates, source width and     
  • // height (for cropping), destination (x,y) coordinates, and destination width     
  • // and height (resize).   
  • context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP