画布-填充圆弧/圆的特定区域 [英] Canvas - Fill a specific area of an arc/circle

问题描述

从W3School示例开始，我创建了一个画布计时器时钟。

我想用另一种颜色（黄色）填充手的所在区域

时钟在此处可用：

因此，给定时间（以时钟分钟为单位），此函数将返回该时钟时间的角度。

  //给定分钟数（时钟的分针）
 //返回以弧度为单位的关联角度
函数minutesToAngle（minutes）{
 var十二OClock = -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（）; 
} 
  

将这两个函数放在一起，您可以像这样填充您的经过时间：

  //填满5分钟的时间
 var cx = canvas.width / 2; //或您时钟的时钟X 
 var cy = canvas.height / 2; //或时钟的中心Y 
 var radius = Math.min（canvas.width，canvas.height）*。90; //或时钟的半径
 var startMinutes = 0; //从12点开始
 var endMinutes = 5; //在12点
的5分钟后结束var startAngle = minutesToAngle（0）; // 12点钟处的角度
 var endAngle = minutesToAngle（5）; //超过12分钟的5分钟处的角度
 
 //填充5分钟后的楔块
 fillWedge（cx，cy，radius，startAngle，endAngle，'gold'）; 
  

通过将这两个函数添加到现有代码中，您可以：

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（）;函数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），黄金）； 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; //从12点开始var endMinutes = 5; //结束于12点5分之后var startAngle = minutesToAngle（0）; // 12点钟的角度var endAngle = minutesToAngle（5）; //在12点后5分钟处的角度//在5分钟内填充楔形fillWedge（cx，cy，radius，startAngle，endAngle，'gold'）;函数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（）; }函数minutesToAngle（minutes）{var十二OClock = -Math.PI / 2; var fullCircle = Math.PI * 2; return（twelveOClock + fullCircle *（minutes / 60））; }  

  #canvas {border：1px纯红色； margin：0自动; }  

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

Starting from a W3School example I've created a canvas timer clock.

I would like to fill with another color (Yellow), the area where the hand is passed.

The clock is available here: https://jsfiddle.net/nzexyd6j/1/

And here is the code:

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

I've tried using lineWidth, but without success.

Do you have any suggestions?

解决方案

Your clock seems to be running backwards?!

Anyway, you want to fill a wedge based on how many clock minutes have elapsed.

So given a time in clock minutes, this function returns the angle at that clock time.

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

The returned angle is in radians, which is the unit-of-measure used to draw an arc on the canvas.

To draw a wedge, you simply fill an arc from the arc's centerpoint like this:

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

Putting the 2 functions together, you can fill your elapsed time like this:

// 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');

By adding these 2 functions to your existing code, you can:

1. Erase the canvas,
2. Fill the background of the elapsed time with yellow,
3. Stroke the clock face and clock hands.

Example code and a Demo:

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>

这篇关于画布-填充圆弧/圆的特定区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！