我怎樣才能停止填補我的圈子？

就像只填滿圓圈的50％或圓圈的25％並留下左邊。就像進度條一樣。

下面是我使用的代碼，但它是填充整個圓。請給我建議。

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

 
var y = ch - 10; 
 
var drawingColor = "#0092f9"; 
 
animate(); 
 

 
function animate() { 
 

 
    if (y > 0) { 
 
     requestAnimationFrame(animate); 
 
    } 
 

 
    ctx.clearRect(0, 0, cw, ch); 
 
    ctx.save(); 
 
    drawContainer(0, null, null); 
 
    drawContainer(15, drawingColor, null); 
 
    drawContainer(7, "white", "white"); 
 
    ctx.save(); 
 
    ctx.clip(); 
 
    drawLiquid(); 
 
    ctx.restore(); 
 
    ctx.restore(); 
 

 
    y--; 
 

 
} 
 

 
function drawLiquid() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0, y); 
 
    for (var x = 0; x < 300; x += 1) { 
 
     ctx.quadraticCurveTo(x + 5, y+5, x + 5, y); 
 
    } 
 
    ctx.lineTo(cw, ch); 
 
    ctx.lineTo(0, ch); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = drawingColor; 
 
    ctx.fill(); 
 
} 
 

 
function drawContainer(linewidth, strokestyle, fillstyle) { 
 
    ctx.beginPath(); 
 
    
 
ctx.arc(cw/2, ch/2,cw/2-30,0,2*Math.PI); 
 
    ctx.lineWidth = linewidth; 
 
    ctx.strokeStyle = strokestyle; 
 
    ctx.stroke(); 
 
    if (fillstyle) { 
 
     ctx.fillStyle = fillstyle; 
 
     ctx.fill(); 
 
    } 
 
}

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

來源

2016-07-14 m9m9m

我知道JavaScript，但青春痘：只要改變y的極限動畫。我把100而不是0，它填補了一半的圓圈。

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

 
var y = ch - 10; 
 
var drawingColor = "#0092f9"; 
 
animate(); 
 

 
function animate() { 
 

 
    if (y > 100) { 
 
     requestAnimationFrame(animate); 
 
    } 
 

 
    ctx.clearRect(0, 0, cw, ch); 
 
    ctx.save(); 
 
    drawContainer(0, null, null); 
 
    drawContainer(15, drawingColor, null); 
 
    drawContainer(7, "white", "white"); 
 
    ctx.save(); 
 
    ctx.clip(); 
 
    drawLiquid(); 
 
    ctx.restore(); 
 
    ctx.restore(); 
 

 
    y--; 
 

 
} 
 

 
function drawLiquid() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0, y); 
 
    for (var x = 0; x < 300; x += 1) { 
 
     ctx.quadraticCurveTo(x + 5, y+5, x + 5, y); 
 
    } 
 
    ctx.lineTo(cw, ch); 
 
    ctx.lineTo(0, ch); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = drawingColor; 
 
    ctx.fill(); 
 
} 
 

 
function drawContainer(linewidth, strokestyle, fillstyle) { 
 
    ctx.beginPath(); 
 
    
 
ctx.arc(cw/2, ch/2,cw/2-30,0,2*Math.PI); 
 
    ctx.lineWidth = linewidth; 
 
    ctx.strokeStyle = strokestyle; 
 
    ctx.stroke(); 
 
    if (fillstyle) { 
 
     ctx.fillStyle = fillstyle; 
 
     ctx.fill(); 
 
    } 
 
}

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

來源

2016-07-14 09:36:59

我怎樣才能停止填補我的圈子？

回答

相關問題