將動態創建的元素轉換爲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元素

回答

相關問題