1。单幅画布

Question

我正在开发一个带有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);
};

https://jsfiddle.net/amwnhx0m/

我在同一个画布上有两个上下文：context1绘制一个黑色圆圈，context2绘制一个红色圆圈。

当我在context1上放一个clearRect时，它会附加在整个画布上，以便context2消失。我想知道在clearRect（性能问题）

之后是否可以保留context2而不重绘

Answer 1

1。单幅画布

作为评论中提到的Blindman67，标准说画布只能指向一个上下文。在您的情况下，context1的值与context2相同。声明context2并没有为您提供一种＆＃34;新图层＆＃34; 。你的代码真的应该使用这样一个上下文：

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

所以回答你的问题，你可以通过在黑色圆圈区域周围调用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>

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

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

希望它有所帮助。

清除画布的特定上下文

1 个答案:

1。单幅画布

2。多个画布