Question

我尝试了以下代码，但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>

此代码位于正文标记内。

Answer 1

您必须了解浏览器执行文件的顺序。以下是浏览器读取此代码的方式：

<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不存在，将画布保存为null（我没有任何内容）
上下文= nothing.getContext('2d');
alert(nothing)
结束脚本
开始画布，因为支持不显示内部的内容
结束身体标记

因此，为了让它可见，你只需编辑你的代码： -

<!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中提及。

Answer 2

根据此搜索http://www.google.co.uk/search?q=firefox4+canvas，firefox 4支持画布。

Answer 3

这对我来说很好：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<canvas id="canvas1" width="200px" height="200px">Your browser does not   support canvas </canvas>

<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>
<body>
</body>
</html>

firefox4不支持canvas吗？

3 个答案: