canvas教程

Canvas系列教程三:插入图片

字号+ 作者:H5之家 来源:H5之家 2015-09-23 19:02 我要评论( )

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

Canvas系列教程三:插入图片

[日期:2012-02-19]    来源:HTML5中文网     作者:HTML5    [字体:]    阅读: 次

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

 drawImage 方法允许在 canvas 中插入其他图像

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

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

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

JavaScript Code复制内容到剪贴板

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • 学习慕课网canvas倒计时实例笔记

    学习慕课网canvas倒计时实例笔记

    2017-04-30 14:01

网友点评
"