canvas，畫布弧，javascript

Question

不能通過輸入減少 canvas 弧的值（它接受大於默認值但不接受較小的值），該怎么辦？

var button = document.querySelector(".btn");
    button.addEventListener("click", () => {
        var input = document.querySelector(".inp").value;
        var c = document.querySelector(".canvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, `${input}`);
        ctx.stroke();
     })

Answer 1

canvas 應在繪制下一條弧線之前清除，否則它們將重疊。

只需添加ctx.clearRect(0,0, c.width, c.height); 弧前。

請參閱下面的示例

 var button = document.querySelector(".btn"); var c = document.querySelector(".canvas"); var ctx = c.getContext("2d"); ctx.lineWidth = 10; ctx.lineCap = "round"; button.addEventListener("click", () => { var input = document.querySelector(".inp").value; ctx.beginPath(); ctx.clearRect(0,0, c.width, c.height); ctx.arc(100, 75, 50, 0, `${input}`); ctx.stroke(); })

 <button class="btn">click me</button> <input class="inp" value=3.14><br> <canvas class="canvas"></canvas>