Question

在我的HTML中，我有：

<div id="cowcloud">
 <canvas id="cows" width="1024" height="253">
   <p>Browser doesn't support HTML5 canvas</p>
 </canvas>
</div>

我使用jQuery ready函数在部分中加载一个javascript文件做一些jQuery的东西。其内容如下：

var cattle = [ 
                 {
                      "name" : "klara88",
                      "polygon" : {
                                       "vertices": [
                                          {"x" : "138", "y" : "204"}, 
                                          {"x" : "145", "y" : "201"},
                                          {"x" : "155", "y" : "178"}, 
                                          {"x" : "208", "y" : "177"},
                                          {"x" : "216", "y" : "200"}, 
                                          {"x" : "208", "y" : "192"},
                                          {"x" : "208", "y" : "218"}, 
                                          {"x" : "196", "y" : "219"},
                                          {"x" : "195", "y" : "206"}, 
                                          {"x" : "170", "y" : "202"},
                                          {"x" : "169", "y" : "219"}, 
                                          {"x" : "150", "y" : "217"}
                                       ]
                                }
                  }, 
              ];

$(document).ready(function() {
    $('#cowcloud').click(function(e){
        [..]
        /* Search the cattle */
        $.each(cattle, function(i, cow) {
            [..]
            var context = $("#cows")[0].getContext('2d');
            context.fillStyle = '#0f0';
            context.beginPath();

            $.each(cow.polygon.vertices, function(i, vertex) {
                if(i == 0) {
                    context.moveTo(vertex.x, vertex.y);
                }
                else {
                    context.lineTo(vertex.x, vertex.y);
                }
            });
        context.closePath();
        context.fill();
        });

    });
 });

我删除了一些与此问题无关的代码。

奇怪的是，即使使用文档就绪函数，jQuery也无法找到id为'cows'的画布。也尝试使用普通的javascript但是元素为null。我在这里错过了什么吗？

Answer 1

好的，这是PEBKAC的经典案例，在你看不到我的代码中：

$('#cowcloud').html('x: ' + point.x + ' y:' + point.y);

替换了画布。

Answer 2

据我所知，你应该使用

var context = $("#cows").get(0).getContext('2d');

而不是

var context = $("#cows")[0].getContext('2d');

这样可以解决吗？

Answer 3

更改此行

var context = $("#cows")[0].getContext('2d');

到

var context = $("#cows").getContext('2d');

jQuery：无法找到HTML 5 canvas元素

3 个答案: