Question

说我想在画布上画一些东西：

function draw() {

    var canvas = document.getElementById('myCanvas');

    ctx = canvas.getContext('2d');
    ctx.canvas.width = 100;
    ctx.canvas.height = 100;

    ctx.fillStyle = 'red';

    ctx.fillRect(0, 0, 50, 50);

}

但是后来我想在其上画一些其他内容，

function drawMore() {

    var canvas = document.getElementById('myCanvas');

    ctx = canvas.getContext('2d');
    ctx.canvas.width = 100;
    ctx.canvas.height = 100;

    ctx.fillStyle = 'blue';

    ctx.fillRect(50, 50, 50, 50);

}

无论如何我可以在不破坏之前绘制的蓝色块的情况下执行此操作，而无需显式重绘以前的内容（例如，我实际上并不知道它是什么）。

谢谢！

Answer 1

删除以下行：

ctx.canvas.width = 100;
ctx.canvas.height = 100;

每次都不需要重置高度和宽度。 Example

设置宽度实际上是清除画布的技巧。

我可以在不破坏以前绘制的画布元素的情况下绘制画布元素吗？

1 个答案: