jquery - 使用 jquery 动态添加 Canvas 的 getContext(2d)

Question

这里有点新手，可能超出了我的深度，但我正在循环一些导入的 xml 并附加一个带有 div 的容器，然后附加一个 Canvas ，然后我尝试绘制到该 Canvas 中。我得到的只是“getContext() 不是函数”非常感谢收到的任何指导

var newCanvas = 
    $('<canvas/>', {'class':'cnvsClass'}, {'id': 'theCanvas'})
    .width(215)
    .height(217);


$("#innerWrapper")
    .append($('<div/>', {'class': 'wrapper'})
        .append($(newCanvas)));



// Have tried  $('<canvas/>', $('.cnvsClass'), $("#theCanvas")
// I've added [0] after the selector but all I get is 
// TypeError: $(...).getContext is not a function
var ctx = $("#theCanvas").getContext("2d");

var image = new Image();
image.src = "AtlasSheet.png";  
$(image).load(function() {
    ctx.drawImage(image, 830,1165, 215, 217, 0, 0, 215, 217);    
});

Answer 1

您需要 native DOM 对象来执行此操作。

试试这个；

var ctx = $("#theCanvas").get(0).getContext("2d");