HTML5使用drawImage()方法绘制图像

王朝学院·作者佚名  2016-08-09
窄屏简体版  字體: 小  |  中  |  大  |  超大  

一、绘制图像

使用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">

三、绘制图片

复制代码

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航