可以't更改Canvas Item的大小

Can't change size of Canvas Item

本文关键字：Item Canvas 更改 可以      更新时间：2023-09-26

我正在尝试更改画布元素的大小。

        var canvas = document.getElementById('timer'),
            ctx = canvas.getContext('2d'),
            sec = this.length,
            countdown = sec;
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#F60017";
        ctx.strokeStyle = "#000000";
        var startAngle = 0,
            time = 0,
            intv = setInterval(function () {
                ctx.clearRect(0, 0, 200, 200);
                var endAngle = (Math.PI * time * 2 / sec);
                ctx.arc(65, 35, 30, startAngle, endAngle, false);
                startAngle = endAngle;
                ctx.stroke();
                countdown--;
                if (++time > sec, countdown == 0) {
                    clearInterval(intv), $("#timer, #counter").show();
                }
            }, 10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="timer"></canvas>

如果我更改ctx.clearRect(0, 0, 200, 200);，它仍然保持200x200

clearRect()用于在绘制新图形之前删除前一个图形。我添加了新的变量：x、y和size。与ctx.lineWidth一起，这应该足以改变外观。

var canvas = document.getElementById('timer'),
    ctx = canvas.getContext('2d'),
    sec = 100,
    countdown = sec;
var x = 60,
    y = 60
    size = 30; // change me
ctx.lineWidth = 25;
ctx.strokeStyle = "#F60017";
ctx.strokeStyle = "#000000";
var startAngle = 0,
    time = 0,
    intv = setInterval(function () {
      console.log('interval');
      ctx.clearRect(0, 0, 200, 200);
      var endAngle = (Math.PI * time * 2 / sec);
      ctx.arc(x, y, size, startAngle, endAngle, false);
      startAngle = endAngle;
      ctx.stroke();
      countdown--;
      if (++time > sec && countdown <0) {
        clearInterval(intv), $("#timer, #counter").show();
      }
    }, 10);
<canvas id="timer"></canvas>

相关文章：