使用jQuery动态添加的画布中的getContext(2d)

问题描述

这里是一个新手，可能超出了我的深度，但是我遍历了一些导入的xml，并在容器中附加了div，然后在其上附加了画布，然后尝试绘制到该画布中.我得到的只是'getContext()不是函数'感激地收到了任何指导

Bit of a newbie here and probably out of my depth but I'm looping over some imported xml and appending a container with a div and then appending that with a canvas, I'm then trying to draw into that canvas. All I get is 'getContext() is not a function' Any guidance gratefully received

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);    
});

推荐答案

您需要使用本机DOM对象.

You need native DOM object to do it.

尝试一下；

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

这篇关于使用jQuery动态添加的画布中的getContext(2d)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！