Question

以下代码不会在画布中加载绿色矩形。这是我第一次尝试jQuery（或者很糟糕或者很糟糕），为什么这么简单的事情不起作用，我很困惑。我的网络浏览器是Firefox 3.6。使用jQuery，因为有另一个jQuery驱动的代码片段可能非常有用......

<html>
<head>
<style type="text/css">
 #canvas {
 border:1px solid black;
 }
</style>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"/>
<script type="text/javascript">
// have also tried
<script type="application/javascript">

  $(function() {
 var canvas = $("#canvas")[0];
 var ctx = canvas.getContext("2d");

 // ctx.clearRect(0,0,300,300);
 ctx.fillStyle = "green";
 ctx.fillRect(0,0,50,50);

 });

</script> 
</head>

<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

Answer 1

使用jQuery获取canvas元素将不起作用。您不能在jQuery对象上使用getContext（）方法。而不是：

var canvas = $("#canvas");

你应该使用（如果“draw”是canvas元素的ID）：

var canvas = document.getElementById('draw');

Answer 2

试试这个：

<script type="application/javascript">
    $(document).ready(function() {
        var canvas = $("#canvas")[0];
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            // Choose a color
            ctx.fillStyle = color;
            ctx.strokeStyle = color;
            ctx.fillRect(0, 0, 50, 50);
        } else {
            // Browser doesn't support CANVAS
        }
    });
</script>

这应该按预期工作。我怀疑你错过了$（document）.ready（）位。

Answer 3

唐唐，

您需要做两处小改动。

首先从此行中删除[0]，

var canvas = $("#canvas")[0]

其次，取[0]并将其添加到if语句

if (canvas[0].getContext) {

并将其添加到ctx

的分配中

var ctx = canvas[0].getContext("2d");

或者在测试变量之前将其分配给变量。

var canvas = $("#canvas"), ctx = canvas[0].getContext("2d");
if (ctx) {

你应该好好去......

Answer 4

你应该关闭canvas标签，就像Nick已经说过的那样，你一定要使用jQuery $（document）.ready（）函数：

<html>
<head>
<style type="text/css">
    #canvas {
        border:1px solid black;
    }
</style>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"/>
<script type="text/javascript">
    $(document).ready(function() {
        var canvas = $("#canvas")[0];
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            // Choose a color
            ctx.fillStyle = "#000000";
            ctx.strokeStyle = "#000000";
            ctx.fillRect(0, 0, 50, 50);
        } else {
            // Browser doesn't support CANVAS
        }
    });
</script>
</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

Answer 5

   $(document).ready(function() {
                var ctx = $("#canvas")[0].getContext("2d");
                // Choose a color
                ctx.fillStyle = "#00ff00";
                ctx.strokeStyle = "#ff0000";
                ctx.fillRect(10, 10, 200, 200);

        });

Answer 6

好的，我在IE中复制问题并解决它。原因是脚本标记必须使用显式关闭标记。所以改变

<script type="text/javascript" src="/js/jquery-1.4.2.min.js" />

为：

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

（浏览器无法理解＆lt; script ... /＆gt;）

还有另一个语法问题是canvas元素没有close标记，但浏览器（IE）似乎理解它。不确定FF

无法使用jQuery在HTML5画布上绘制

6 个答案: