使用 jquery 动态添加画布答案

【问题标题】：add canvas dynamically with jquery使用 jquery 动态添加画布
【发布时间】：2011-12-16 00:23:06
【问题描述】：

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

我的问题与左侧的“添加形状”按钮有关。

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

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

【问题讨论】：

请说明。在你的代码中添加形状对我来说很好。
@TopiOjala——它在哪个小提琴中工作？顶部还是底部？我的问题是代码在底部小提琴 (jsfiddle.net/dzejkej/xwg5f) 中有效，但在顶部 (jsfiddle.net/RymyY) 中无效。
这似乎对我有用：我单击“开始”、“添加形状”、“矩形”、“添加”，在画布的左上角绘制了一个矩形。当然，随后的矩形是在前面的矩形上绘制的。显然，圈子还没有实现。那么究竟缺少什么功能呢？ “添加新画布”到底是什么意思？
没有在第一个矩形上绘制新矩形，只是只有第一个画布元素填充了颜色。

标签： javascript jquery html5-canvas

【解决方案1】：

您不应像在示例代码中那样创建具有相同 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/

【讨论】：