Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > H5 Tutorial > body text

HTML5使用drawImage()方法绘制图像_html5教程技巧

WBOY

Release： 2016-05-16 15:47:34

Original

1900 people have browsed it

一、绘制图像

使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。
drawImage(image,x,y) ：在canvas中(x,y)处绘制图片。
drawImage(image,x,y,width,height) ：在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度。
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ：从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。

二、 HTML5使用drawImage()方法绘制图像_html5教程技巧标签

绘制图片前，还需要将图片加载到浏览器中。这里我们仅仅在canvas标签后面添加一个标签。

三、绘制图片

复制代码

代码如下:

HTML5

四、绘制效果

五、附上原坦克素材

Related labels：

html5

source：php.cn

Previous article：html5桌面通知(Web Notifications)实例解析_html5教程技巧 Next article：基于html5 canvas实现漫天飞雪效果实例_html5教程技巧

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn