javascript - 清除 Canvas 的特定上下文

Question

我正在开发一个使用 HTML Canvas 的项目，但遇到了一些问题。

我希望能够清除 Canvas 的特定上下文而不改变其他上下文。 这是一个例子:

var canvas = document.getElementById('dessin');
var context1 = canvas.getContext('2d');
var context2 = canvas.getContext('2d');

context1.beginPath();
context1.arc(100, 100, 50, 0, 2 * Math.PI);
context1.fill();
context1.closePath();

context2.beginPath();
context2.fillStyle = 'red';
context2.arc(200, 200, 50, 0, 2 * Math.PI);
context2.fill();
context2.closePath();


document.getElementById('clearCanvas1').onclick = function(){
   context1.clearRect(0,0,canvas.width, canvas.height);
};

https://jsfiddle.net/amwnhx0m/

我在同一个 Canvas 上有 2 个上下文:context1 绘制黑色圆圈，context2 绘制红色圆圈。

当我在 context1 上放置一个clearRect时，它会被附加到整个 Canvas 上，因此 context2 就会消失。我想知道是否可以在clearRect之后保留context2而不重绘(性能问题)

Answer 1

1。单个 Canvas

正如 Blindman67 在他的评论中提到的，该标准规定 Canvas 只能指向一个上下文。在您的情况下，context1 与 context2 具有相同的值。声明 context2 并不会为您提供某种“新层”。您的代码实际上应该只使用一个上下文，如下所示:

var canvas = document.getElementById("design");
var context = canvas.getContext('2d');

至于绘制圆圈，请使用 context 变量。

context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
context.closePath();

context.beginPath();
context.fillStyle = 'red';
context.arc(200, 200, 50, 0, 2 * Math.PI);
context.fill();
context.closePath();

因此，回答您的问题，可以专门清除 Canvas 的一部分的一种方法是仅在黑色圆圈区域周围调用 clearRect 。

context.clearRect(50, 50, 100, 100);

这只会清除 Canvas 的特定部分。

2。多个 Canvas

在不同的上下文中绘制两个东西的一种方法是使用多个 Canvas 堆叠在一起。使用 CSS 中的 z-index 将您想要的 Canvas 放置在顶部。

<style>
    .canvasHolder{
        position: relative;
        height: 500px; width: 500px; //based on your canvas size
    }
    .canvas{
        position: absolute;
        top: 0; left: 0;
    }
</style>

<div class="canvasHolder">
    <canvas class="canvas" id="dessin1" width="500" height="500"> ... </canvas>
    <canvas class="canvas" id="dessin2" width="500" height="500"> ... </canvas>
</div>

<button id="clearCanvas1"> Clear canvas1 (black circle) </button>

在 Javascript 中，您应该为每个 Canvas 声明两个单独的 Canvas 和上下文。这样，您就可以将它们视为单独的层。

var canvas1 = document.getElementById('dessin1');
var context1 = canvas1.getContext('2d');

var canvas2 = document.getElementById('dessin2');
var context2 = canvas2.getContext('2d');

context1.beginPath();
context1.arc(100, 100, 50, 0, 2 * Math.PI);
context1.fill();
context1.closePath();

context2.beginPath();
context2.fillStyle = 'red';
context2.arc(200, 200, 50, 0, 2 * Math.PI);
context2.fill();
context2.closePath();


document.getElementById('clearCanvas1').onclick = function(){
    context1.clearRect(0,0,canvas.width, canvas.height);
};

希望有帮助。