Question

Here is an example!

我正在尝试重置drawValueArc()内的绿色弧线，这样每次单击更改按钮时，绿色弧线都会被移除并重新绘制。如何在不删除整个画布的情况下将其删除？另外，顺便说一下，我注意到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的所有角度，并在绘制时使用偏移量。

使用重绘基础进行演示（我将其移至jsfiddle，因为jsbin对我不起作用）：

的 http://jsfiddle.net/3dGLR/

使用离屏画布进行演示

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

清除上一个弧

有几种方法可以清除之前绘制的弧：

您可以将基弧绘制到离屏画布上，并使用drawImage()删除旧版。

您可以按照以下示例执行操作，只需使用基色重新绘制

与2.一样，但减去绿色弧线，并从绿色弧的末端到基弧的末端绘制基色。

使用fillRect或clearRect清除整个画布。

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，屏幕外画布）。

如何清除部分画布？

1 个答案:

绘制过去的边界

清除上一个弧