无法更改画布项目的大小

Question

I am trying to change the size of my canvas element.

  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> 

If I change ctx.clearRect(0, 0, 200, 200); it still remains 200x200

Answer 1

The clearRect() is used to remove the previous drawing before a new one is drawn. I added new variables: x , y and size . Along with ctx.lineWidth , this should be enough to change the appearance.

 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>