Question

我是HTML Canvas的新手。这是一个noob问题，但为什么这段代码不起作用？

        window.onload = function () {
        var canvas = document.getElementById('canvas1');
        var c = canvas.getContext('2d');

        c.fillStyle = 'rgb(0, 200, 0)';    
        c.fillRect(0, 0, 500, 500);

        c.fillRect(50, 100, 100, 100);

        }

我要做的就是到达那里画布上有两个长方形......一个大的绿色和一个较小的黑色。我该怎么做？

Answer 1

嗯，你正在做的是绘制两个绿色矩形。由于第二个在第一个内部，你没有看到它。绘制绿色矩形后，您错过了将fillStyle属性设置为黑色：

window.onload = function () {
    var canvas = document.getElementById('canvas1');
    var c = canvas.getContext('2d');

    c.fillStyle = 'rgb(0, 200, 0)';    
    c.fillRect(0, 0, 500, 500);
    c.fillStyle = 'black';
    c.fillRect(50, 100, 100, 100);

}

如何在画布上绘制多个东西？

1 个答案: