Question

我正在使用html5画布，我对jQuery元素和html元素之间的区别感到非常困惑。

使用2D画布图时，通常用

打开

var canvas = document.getElementById("canvas"); // identifies element
var ctx = canvas.getContext('2d'); // specifies a 2d rendering context

我正在使用jQuery，所以我想我可以使用选择器

var canvas = $("#canvas");
var ctx = canvas.getContext('2d');

...并且返回了控制台错误＆＃34; canvas.getContext不是函数＆＃34;。我浏览并了解到.getContext不会运行因为canvas现在是一个jQuery对象而不是canvas元素。这个问题的一个常见解决方案是使用......

var canvas = $("#canvas").get(0);

...适用于大多数人将jQuery对象转换回其原生DOM元素。不幸的是这里＆＃39;帆布＆＃39;返回undefined因为我的canvas元素是动态生成的，而不是本机DOM元素。我试过......

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

...但是返回了＆＃39; null＆＃39;。如何找到动态创建的canvas元素并在此上下文中应用它？如果我误解了某些内容或者您是否需要更多信息，请告诉我。

Answer 1

Working sample！

＆＃13;

function makeColorPalette(scale, div) {
    var palette = div.append("<canvas id='canvas' height='" + 100*scale + "px' width='" + 100*scale + "px'></canvas>");
    var canvas = $('#canvas')[0];
    var ctx = canvas.getContext('2d');
    ctx.fillRect(50, 25, 150, 100);
}

$(document).ready(function() {
	makeColorPalette(2, $('.palette'));
});

＆＃13;

#canvas {
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="palette">
</div>

＆＃13;

Answer 2

如果将$('#canvas')替换为$('#canvas').get(0)或div.get(0).lastChild，则您的示例does会有效。

将动态创建的元素转换为DOM元素

2 个答案: