畫布 - 填充圓弧/圓的特定區域

Question

從W3School的示例開始，我創建了一個畫布計時器時鐘。

我想填補另一種顏色（黃色），手通過的區域。

時鐘可以在這裏找到：https://jsfiddle.net/nzexyd6j/1/

這裏是代碼：

<canvas id="canvas" width="400" height="400" style="background-color:#fff"> 
</canvas> 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var radius = canvas.height /2; 
var minuti = 3; 
var tempoInit = minuti * 60; 
var tempo = tempoInit; 
//var tempo = 180; 
var lancetta; 
ctx.translate(radius, radius); 
radius = radius * 0.90 
setInterval(drawClock, 1000); 

function drawClock() { 
    drawFace(ctx, radius); 
// drawNumbers(ctx, radius); 
    drawTime(ctx, radius); 
} 
//f2634a 
function drawFace(ctx, radius) { 
    var grad; 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius, 0, 2*Math.PI); 
    ctx.fillStyle = '#fff'; 
    ctx.fill(); 
    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); 
    grad.addColorStop(0, '#f2634a'); 
    grad.addColorStop(1, '#f2634a'); 
    ctx.strokeStyle = grad; 
    ctx.lineWidth = radius*0.1; 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 
    ctx.fillStyle = '#f2634a'; 
// ctx.fill(); 
} 

function drawNumbers(ctx, radius) { 
    var ang; 
    var num; 
    ctx.font = radius*0.15 + "px arial"; 
    ctx.textBaseline="middle"; 
    ctx.textAlign="center"; 
    for(num = 1; num < (minuti + 1); num++){ 
    ang = (num * Math.PI/minuti) * 2; 
    ctx.rotate(ang); 
    ctx.translate(0, -radius*0.85); 
    ctx.rotate(-ang); 
    ctx.fillText(num.toString(), 0, 0); 
    ctx.rotate(ang); 
    ctx.translate(0, radius*0.85); 
    ctx.rotate(-ang); 
    } 
} 

function drawTime(ctx, radius){ 
    tempo--; 
    lancetta = (tempo*Math.PI/tempoInit) * 2; 
    drawHand(ctx, lancetta, radius*1, radius*0.07); 
    drawHand(ctx, (180*Math.PI/tempoInit) * 2, radius*1, radius*0.07); 
} 

function drawHand(ctx, pos, length, width) { 
    ctx.beginPath(); 
    ctx.lineWidth = width; 
    ctx.lineCap = "round"; 
    ctx.moveTo(0,0); 
    ctx.rotate(pos); 
    ctx.lineTo(0, -length); 
    ctx.stroke(); 
    ctx.rotate(-pos); 
} 

我使用的lineWidth嘗試過，但沒有成功。

你有什麼建議嗎？

Answer 1

你的時鐘好像在倒退？！

無論如何，你想根據已經過了多少分鐘的時間來填充一個楔子。

因此，考慮在時鐘分鐘的時間，這個功能在那個時鐘時間返回的角度。

// given minutes (a minute-hand on a clock) 
// return the associated angle in radians 
function minutesToAngle(minutes){ 
    var twelveOClock=-Math.PI/2; 
    var fullCircle=Math.PI*2; 
    return(twelveOClock+fullCircle*(minutes/60)); 
} 

返回的角度以弧度爲單位，這是用於繪製在畫布上的圓弧的單位的小節。

要繪製一個楔子，您只需填寫從圓弧的中心點像這樣的弧線：

function fillWedge(cx,cy,radius,startAngle,endAngle,fillcolor){ 
    ctx.beginPath(); 
    ctx.moveTo(cx,cy); 
    ctx.arc(cx,cy,radius,startAngle,endAngle); 
    ctx.closePath(); 
    ctx.fillStyle=fillcolor; 
    ctx.fill(); 
} 

把2個功能結合在一起，你可以填寫你經過的時間是這樣的：

// fill 5 elapsed minutes 
var cx=canvas.width/2; // or your clock's centerX 
var cy=canvas.height/2; // or your clock's centerY 
var radius=Math.min(canvas.width,canvas.height)*.90; // or your clock's radius 
var startMinutes=0; // start at 12 o'clock 
var endMinutes=5; // end at 5 minutes past 12 
var startAngle=minutesToAngle(0); // the angle at 12 o'clock 
var endAngle=minutesToAngle(5); // the angle at 5 minutes past 12 

// fill the wedge for 5 elapsed minutes 
fillWedge(cx,cy,radius,startAngle,endAngle,'gold'); 

通過將這2個功能添加到您現有的代碼中，您可以：

1. 擦除畫布，
2. 用黃色填充經過時間的背景，
3. 敲擊鐘面和鍾針。

實施例的代碼和一個演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var cx=cw/2; 
 
var cy=ch/2; 
 
var radius=135; 
 
var minutes=0; 
 
var minutesIncrement=0.334; 
 

 
animate(); 
 

 
function animate(time){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,cy,radius,0,Math.PI*2); 
 
    ctx.strokeStyle='indianred'; 
 
    ctx.lineWidth=10; 
 
    ctx.lineJoin='round'; 
 
    ctx.stroke(); 
 
    fillWedge(cx,cy,radius,minutesToAngle(0),minutesToAngle(minutes),'gold'); 
 
    ctx.stroke(); 
 
    minutes+=minutesIncrement; 
 
    if(minutes>60){minutes=0;} 
 
    requestAnimationFrame(animate); 
 
} 
 

 
    var cx=canvas.width/2; 
 
    var cy=canvas.height/2; 
 
    var radius=Math.min(canvas.width,canvas.height)*.90/2; 
 
    var startMinutes=0; // start at 12 o'clock 
 
    var endMinutes=5; // end at 5 minutes past 12 
 
    var startAngle=minutesToAngle(0); // the angle at 12 o'clock 
 
    var endAngle=minutesToAngle(5); // the angle at 5 minutes past 12 
 

 
    // fill the wedge for 5 elapsed minutes 
 
    fillWedge(cx,cy,radius,startAngle,endAngle,'gold'); 
 

 
    function fillWedge(cx,cy,radius,startAngle,endAngle,fillcolor){ 
 
     ctx.beginPath(); 
 
     ctx.moveTo(cx,cy); 
 
     ctx.arc(cx,cy,radius,startAngle,endAngle); 
 
     ctx.closePath(); 
 
     ctx.fillStyle=fillcolor; 
 
     ctx.fill(); 
 
    } 
 

 
    function minutesToAngle(minutes){ 
 
     var twelveOClock=-Math.PI/2; 
 
     var fullCircle=Math.PI*2; 
 
     return(twelveOClock+fullCircle*(minutes/60)); 
 
    }

#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>