我尝试了以下代码，但 Firefox4 没有显示任何内容..
<script type="text/javascript">
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);
alert(context);
</script>
<canvas id="canvas1" width="200px" height="200px">Your browser does not support canvas </canvas>
此代码位于 body 标记内。
最佳答案
您必须了解浏览器执行文件的顺序。 以下是浏览器读取此代码的方式:
<script type="text/javascript">
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);
alert(context);
</script>
<canvas id="canvas1" width="200px" height="200px">Your browser does not support canvas </canvas>
- 正文标记开始
- 脚本标记开始
- 查找 ID 为
canvas1的元素 - Canvas1不存在，将canvas保存为null(我当作什么都没有)
- Context =
nothing.getContext('2d'); 警报(无)- 结束脚本
- 开始 Canvas ，因为支持不显示里面的内容
- 正文结束标记
因此，要使其可见，您只需像这样编辑代码:-
<!DOCTYPE HTML>
<html>
<head>
<title>Sample by RHNVRM(aka rohan verma)</title>
</head>
<body>
<!--Canvas-->
<canvas id="canvas1" width="200px" height="200px">Your browser does not support canvas </canvas>
<!--Begin Script-->
<script>
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);
alert(context);
</script>
</body>
</html>
注意: 使用 Javascript 时无需在 HTML5 中提及。
关于javascript - firefox4还不支持canvas吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6314691/