使用jquery动态添加画布

时间:2011-12-15 15:37:04

标签: javascript jquery html5-canvas

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

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

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

我不知道为什么我的不工作。我不知道什么是错的。请帮忙。

1 个答案:

答案 0 :(得分:11)

您不应该使用与示例代码中相同的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/