html5标签canvas函数drawImage使用方法

html5标签canvas函数drawImage使用方法

					<div> 
														 方帅															
														 2024-09-29 03:13:07 

				</div>
									<div>


	<p>html5中标签canvas，函数drawImage()：</p>

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

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

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

				</div>


														<div>