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()检索了现有的canvas元素，然后使用jQuery $('<canvas>')创建了另一个，并将其附加到#work_area。

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

您真的想要拨打document.getElementById('canvas')而不是document.createElement('canvas')吗？在第一种情况下，DOM中必须有一个canvas元素，id="canvas"看起来很可疑。

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

如果这只是答案中的编写代码，那么请检查您的HTML（您还应该提供）。您的代码正如 fiddle 。

中所示

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

编辑＃2（回复评论中的fiddle）：

对于每个形状，您将创建一个新的canvas元素，并且所有这些元素都具有相同的（！）id。这是不正确的。元素的属性id应该是唯一的。在您的代码中，您将始终获得第一个画布并在其上绘制 - 现在您需要创建多少个形状。其余的画布元素都是空的。
您的代码正确绘制矩形（除了“相同画布”问题）。尝试绘制高度和宽度较大的矩形 - 它正在工作。当宽度/高度非常小时，画布太小而不能显示矩形。设置最小宽度/高度或使用一个大画布和绘制形状是一种方法。

使用jquery创建自定义绘图

1 个答案: