html5-canvas 加载并显示图像
示例
加载图像并将其放置在画布上
var image = new Image(); //请参阅有关创建图像的注释
image.src = "imageURL";
image.onload = function(){
ctx.drawImage(this,0,0);
}创建图像
有几种创建图像的方法
newImage()
document.createElement("img")
<imgsrc='imageUrl'id='myImage'> 作为HTML正文的一部分，并通过document.getElementById('myImage')
该图像是HTMLImageElement
Image.src属性
该图像src可以是任何有效的图像URL或编码的dataURL。有关图像格式和支持的更多信息，请参见本主题的备注。
image.src="http://my.domain.com/images/myImage.jpg"
image.src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="*
*dataURL是包含黑色的1乘1像素gif图像
关于加载和错误的说明
设置其src属性后，图像将开始加载。加载是同步的，但是onload直到函数或代码退出/返回后才调用该事件。
如果您从页面获取图像（例如document.getElementById("myImage")），并且图像src已设置，则可能已加载或可能未加载。您可以检查与图像的状态HTMLImageElement.complete，这将是true，如果完成。这并不意味着图像已经加载，这意味着它已经
已加载
有一个错误
尚未设置src属性，该属性等于空字符串""
如果图像来自不可靠的来源，并且由于各种原因可能无法访问，则它将生成错误事件。发生这种情况时，图像将处于损坏状态。如果随后尝试将其绘制到画布上，则会引发以下错误
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
通过提供image.onerror=myImgErrorHandler事件，您可以采取适当的措施来防止错误。