使用 jquery 创建自定义绘图

Question

这是我的代码：

$('#add_shape').click(function() {
    var rectHeight = $('#rect_height_input').val();
    var rectWidth = $('#width_input').val();

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

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = $('#color_list option:selected').val();
        ctx.fillRect(0, 0, rectWidth, rectHeight);
});

单击#add_shape 按钮时，矩形不显示。我在这里想念什么？请帮忙。

Answer 1

回应之前的revision：

您使用 document.getElementById() 检索了现有的画布元素，然后使用 jQuery 创建了另一个元素 $('<canvas>') 并将其附加到 #work_area。

将$('<canvas>') 更改为$(canvas) 以使用现有的画布。

你真的想打电话给document.getElementById('canvas')而不是document.createElement('canvas')吗？在第一种情况下，DOM 中必须已经有一个带有 id="canvas" 的 canvas 元素，这看起来很可疑。

编辑 #1（响应当前版本）：

如果这只是答案中的书面代码，请检查您的 HTML（您也应该提供）。您的代码如 fiddle 所示运行。

确保 ID 正确 - 您使用 #rect_height_input 表示高度，但使用 #width_input 表示宽度并仔细检查颜色选项的值 - 可能矩形是使用白色绘制的。

编辑#2（响应 cmets 中的fiddle）：

• 为每个形状创建一个新的画布元素，所有这些元素都具有相同的 (!) id。这是不正确的。元素的属性id 应该是唯一的。在您的代码中，您将始终获得第一个画布并在其上绘制 - 现在无论您创建了多少形状。其余的画布元素是空的。

• 您的代码正在正确绘制矩形（除了“相同的画布”问题）。尝试绘制具有大高度和宽度的矩形 - 它正在工作。当宽度/高度非常小时，画布太小而无法显示矩形。设置最小宽度/高度或使用一个大画布并在其上绘制形状是一种方法。