由于今天在写HTML5的程序，但是在canvas画布上绘制图片总是不成功。最后几经波折终于找出问题所在！
首先上一段代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
" ]<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="/images/1.jpg"; cxt.drawImage(img,0,0); </script> </body> </html> |
当然以上的代码是绘制不出来图片的，原因是因为在canvas上绘制图片的时候，是要求图片加载完毕之后才能绘制的，如果加载不完全就绘制的话，绘制是不成功的，所以运行的时候你会看见什么也没用，只有一个画布。这一点要特别注意~~
以下是正确的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body> <canvas id="my_canvas" width="600" height="400"> Fallback content here </canvas> <script type="text/javascript"> var canvas = document.getElementById('my_canvas'); var cxt = canvas.getContext('2d'); var img = new Image(); img.src = "images/1.jpg"; img.addEventListener("load",loaded,false); function loaded(){ cxt.drawImage(img,0,0); }; </script> </body> </html> |
其中这一句：img.addEventListener 是表示等待图片的加载，加载完之后执行之后的绘制函数~！
以上均是本人今天的测试程序。只为简单记录，不喜者可以喷~