第一,使用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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
第三个问题:运行在Chrome上会出现以下两种情况1.加载不出来,始终加载不出来2.第一次加载出来了,刷新一下就没有了。解决这个问题的方法:
ctx.drawImage(img,10,10);
- 1
改
window.onload=function(){ctx.drawImage(img,10,10);}