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

Question

我正在使用html5 canvas，但对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');

...并且控制台错误返回“ canvas.getContext不是函数”。 我浏览并了解到.getContext无法运行，因为canvas现在是jQuery对象，而不是canvas元素。 解决此问题的常见方法是使用...

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

...对于大多数人而言，将jQuery对象转换回其本机DOM元素效果很好。 不幸的是，这里的“ canvas”返回未定义，因为我的canvas元素是动态生成的，而不是本机DOM元素。 我试过了...

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

...但是返回“ null”。 如何找到动态创建的canvas元素并将其应用到此上下文中？ 如果我有误解或需要更多信息，请告诉我。

Answer 1

工作样本 ！

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

 #canvas { border: 1px solid black; } 

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

Answer 2

如果将$('#canvas')替换$('#canvas') $('#canvas').get(0)或div.get(0).lastChild则您的示例可以正常工作。