javascript - 如何清除部分 Canvas ？

Question

Here is an example!

我正在尝试重置 drawValueArc() 中的绿色弧线，以便每次单击更改按钮时，绿色弧线都会被移除并重新绘制。如何在不移除整个 Canvas 的情况下移除它？另外，顺便说一句，我注意到 Math.random() * 405 * Math.PI/180 实际上并不总是导致适合灰色弧线的弧线，有时它更大比灰色圆弧，这是为什么呢？

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var cx = 150;
var cy = 150;
var startRadians = 135 * Math.PI / 180;
var endRadians = 405 * Math.PI / 180;

//main arc
ctx.beginPath();
ctx.arc(cx, cy, 58, startRadians, endRadians, false);
ctx.strokeStyle="rgb(220,220,220)";
ctx.lineWidth = 38;
ctx.stroke();

$('#setRandomValue').click(function(){
  drawValueArc(Math.random() * 405 * Math.PI / 180);
});


function drawValueArc(val){
  //ctx.clearRect(0, 0, W, H);
  ctx.beginPath();
  ctx.arc(cx, cy, 58, startRadians, val, false);
  ctx.strokeStyle = "green";
  ctx.lineWidth = 38;
  ctx.stroke();
}

Answer 1

绘制越过边界

您面临的问题首先是您在圆上 0 度之前和之后绘制的事实。这处理起来可能很复杂，因为您需要分成两份抽奖:一份用于高达 0 (360) 的部分，另一份用于剩余部分的 0。

有一个简单的技巧可以使它更容易处理，那就是处理从 0 开始的所有 Angular 并在绘制时使用偏移量。

使用 redraw base 的演示(我把它移到了 jsfiddle，因为 jsbin 对我不起作用):

http://jsfiddle.net/3dGLR/

使用离屏 Canvas 的演示

http://jsfiddle.net/AbdiasSoftware/Dg9Jj/

首先是偏移量的一些优化和设置:

var startRadians = 0;        //just deal with angles
var endRadians = 300;
var deg2rad = Math.PI / 180; //pre-calculate this to save some cpu cycles
var offset = 122;            //adjust this to modify rotation

我们现在让主函数 drawArc() 为我们完成所有计算，这样我们就可以专注于数字 - 这里我们还偏移了值:

function drawArc(color, start, end) {
    ctx.beginPath();

    ctx.arc(cx, cy, 58,
        (startRadians + offset) * deg2rad,
        (end + offset) * deg2rad, false);

    ctx.strokeStyle = color;
    ctx.lineWidth = 38;
    ctx.stroke();
}

清除上一个弧

清除之前绘制的圆弧有几种技巧:

1. 您可以将基本圆弧绘制到屏幕外的 Canvas 上，然后使用 drawImage() 删除旧圆弧。
2. 你可以像下面的例子一样，用基色重新绘制即可
3. 与 2. 相同，但减去绿色弧线并从绿色弧线的末端到基础弧线的末端绘制基色。
4. 使用 fillRect 或 clearRect 清除整个 Canvas 。

1 和 3 最快，而 4 最慢。

没有重构函数(drawArc)就这么简单:

function drawValueArc(val) {
    drawArc("rgb(220,220,220)", startRadians, endRadians);
    drawArc("green", startRadians, val);
}

因为现在关于开始的一切都是基于 0 的，我们真的不需要给 drawArc 而不是 startRadians 0 以外的任何其他参数。使用新的偏移量来偏移起始位置并将 endRadians 调整到您希望它停止的位置。

正如您在演示中看到的那样，使用这种技术可以检查所有内容，而无需拆分绘制。

提示:如果您注意到边缘出现绿色瑕疵:这是由于抗锯齿引起的。只需将绿色的线宽减少 2 个像素(参见演示 2，离屏 Canvas )。