软件项目技术点(8)—— canvas调用drawImage绘制图片

AxeSlide软件项目梳理   canvas绘图系列知识点整理

html5中标签canvas，函数drawImage()：

使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。参数传递三种形式：

1）drawImage(image,x,y)：在canvas中(x,y)处绘制图片。

2）drawImage(image,x,y,width,height)：在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度。

3）drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height)：从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。

其中image可以是一个页面中现有的dom元素，使用document.getElementById()获取的；

或者使用document.createElement("img")新创建元素，但赋值src后需要监听onload事件，回调里调用drawImage，如果立即调用未加载完成时，会画不出来图片。