Javascript 清除画布的特定上下文

我正在做一个使用HTML画布的项目，有几件事我遇到了麻烦

我希望能够在不改变其他内容的情况下清除画布的特定上下文。 以下是一个例子：

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

我在同一张画布上有两个上下文：context1画一个黑圈，context2画一个红圈

当我在context1上放置一个clearRect时，它会附加在整个画布上，这样context2就会消失。我想知道是否有可能在clearRect（性能问题）之后不重新绘制而保留context2

1。单画布 正如他在评论中提到的那样，标准规定画布只能指向一个上下文。在您的情况下，

context1

的值与

context2

的值相同。声明

context2

不会给您一种“新层”。您的代码实际上应该只使用如下一种上下文：

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

至于绘制圆，请使用

上下文

变量

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

因此，在回答您的问题时，可以专门清除画布的一部分的一种方法是只在黑圈区域周围调用

clearRect

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

这只会清除画布的特定部分

2.多张画布 你可以在不同的背景下画两样东西的一种方法是使用多张画布叠在一起。使用CSS中的

z-index

，将所需画布定位在顶部

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

希望有帮助。

1。单画布 正如他在评论中提到的那样，标准规定画布只能指向一个上下文。在您的情况下，

context1

的值与

context2

的值相同。声明

context2

不会给您一种“新层”。您的代码实际上应该只使用如下一种上下文：

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

至于绘制圆，请使用

上下文

变量

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

因此，在回答您的问题时，可以专门清除画布的一部分的一种方法是只在黑圈区域周围调用

clearRect

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

这只会清除画布的特定部分

2.多张画布 你可以在不同的背景下画两样东西的一种方法是使用多张画布叠在一起。使用CSS中的

z-index

，将所需画布定位在顶部

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

---

希望有帮助。

阅读标准画布一次只能指向一个上下文。尚不清楚

context1

和

context2

如何引用相同的对象。是的，画布只有1个上下文，而对

canvas的所有引用都引用相同的上下文。getContext（'2d'）

引用相同的上下文。通过标准阅读画布一次只能指向一个上下文。尚不清楚

context1

和

context2

如何引用相同的对象。是的，画布只有1个上下文，对

canvas.getContext（'2d'）的所有引用都引用相同的上下文。