手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >HTML5使用drawImage()方法绘制图像
HTML5使用drawImage()方法绘制图像
摘要:一、绘制图像使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。drawImage(image,x,y):在canv...

 一、绘制图像

使用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)绘制出来。

二、<img>标签

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

<img src = "tk.jpg" id = "tkjpg">

三、绘制图片

精品推荐
分类导航