如何在 Canvas 上绘制多个东西？

Question

我对 HTML Canvas 还是很陌生。这是一个菜鸟问题，但为什么这段代码不起作用？

        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);

}