如何清除部分畫布？

Question

這是一個例子！

我正在嘗試重置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

我們現在讓main函數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. 您可以將基弧繪制到離屏畫布並使用drawImage()來擦除舊的。
2. 您可以執行以下示例，只需使用基色重新繪制它
3. 與2.一樣，但減去綠色弧並從綠色弧的末端到基弧的末端繪制基色。
4. 使用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，屏幕外畫布）。