ホームページ > 記事 > ウェブフロントエンド > HTML5使用drawImage()方法绘制图像_html5教程技巧
HTML5使用drawImage()方法绘制图像_html5教程技巧
- WBOYオリジナル
- 2016-05-16 15:47:341903ブラウズ
一、绘制图像
使用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)绘制出来。
二、标签
绘制图片前，还需要将图片加载到浏览器中。这里我们仅仅在canvas标签后面添加一个标签。
三、绘制图片
复制代码
代码如下:四、绘制效果
五、附上原坦克素材
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。