使用 jquery 动态添加画布

我已将所有代码包含在这个小提琴中：http://jsfiddle.net/RymyY/ http://jsfiddle.net/RymyY/

我的问题涉及左侧的“添加形状”按钮。

我希望每次单击第二个添加按钮时都能够添加一个新画布，但我无法让它工作。类似的代码在这个小提琴中工作：http://jsfiddle.net/dzejkej/xwg5f/ http://jsfiddle.net/dzejkej/xwg5f/

我不知道为什么我的不工作。我不知道出了什么问题。请帮忙。

您不应像在示例代码中那样创建具有相同 ID 的多个元素。document.getElementById('canvas');总是返回第一个 id 为“canvas”的元素，正如它应该的那样。

var elementID = 'canvas' + $('canvas').length; // Unique ID

$('<canvas>').attr({
    id: elementID
}).css({
    width: rectWidth + 'px',
    height: rectHeight + 'px'
}).appendTo('#work_area');

var canvas = document.getElementById(elementID); // Use the created element

这是一个工作示例；http://jsfiddle.net/5b8NH/ http://jsfiddle.net/5b8NH/