Question

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="timer"></canvas>

＆＃13;

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

Answer 1

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>

无法更改Canvas项的大小

1 个答案: