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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.