canvas完全无法显示的问题

来源：互联网发布：周金涛2019买点知乎编辑：程序博客网时间：2024/06/13 02:01

第一，使用canvas标签时script标签要放在body的下面，放在head里面就可能显示不出来。想起上次做火焰特效，script放到head中，帧数明显下降。这里貌似涉及到JS性能优化和浏览器如何渲染HTML文件的问题（算了不深究了）。
第二，别再把方法和函数名写错了。
下面是W3C教程上的演示代码，只修改了图片的位置：

<!DOCTYPE html><html><body><p>要使用的图像：</p><img id="tulip" src="p.jpg" alt="The Tulip" /><p>画布：</p><canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("tulip");ctx.drawImage(img,10,10);</script></body></html>

第三个问题：运行在Chrome上会出现以下两种情况1.加载不出来，始终加载不出来2.第一次加载出来了，刷新一下就没有了。解决这个问题的方法：

ctx.drawImage(img,10,10);

改

window.onload=function(){ctx.drawImage(img,10,10);}

0 0