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

我正在处理html5画布，我对jQuery元素和html元素之间的差异感到非常困惑。将动态创建的元素转换为DOM元素

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

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

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

...它适合大多数人转换jQuery对象回到它的本地DOM元素。不幸的是，这里'canvas'返回undefined，因为我的canvas元素是动态生成的，而不是本地DOM元素。我试过...

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

...但是返回'null'。我如何找到一个动态创建的画布元素并将其应用于此上下文中？如果我误解了某些内容或需要更多信息，请告诉我。

来源

2015-10-15 Jotak

为什么不把动态创建的'canvas'元素保存在一个变量中，然后在需要本地'canvas'元素时使用这个变量？ –

这也返回“canvas.getContext不是一个函数”。 – Jotak

你到底如何动态地创建一个'canvas'元素？ –

Working sample！

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() { 
 
\t 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>

来源

2015-10-15 01:02:06 Anonymous0day

也许一个小解释？ – Kaiido

谢谢！这工作正常！：D – Jotak

'$（）'会返回一个jQuery对象。如果您需要在此对象中选择的元素，则需要使用其“get（index）”方法或其['index]'数组索引。（'$（'＃anyElement'）[0]'或$（'＃anyElement'）。get（0）'将返回元素） – Kaiido

你的榜样does的工作，如果有$('#canvas').get(0)或div.get(0).lastChild更换$('#canvas')。

来源

2015-10-15 01:18:23

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

回答

相关问题