Сообщение от рони
|
var Timer=new timer(canvasW/2,canvasH/2);
|
Это где так учат?!
рони,
Jimy, а если разные таймеры?
<canvas id="canvas" width=300 height="300"></canvas>
<script>
function Timer(canvas) {
this.canvas = canvas;
this.context = canvas.getContext("2d");
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.counter = 90;
this.lastTime = performance.now();
this.animate();
}
Timer.prototype.draw = function draw() {
var color = "blue";
var ctx = this.context;
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
ctx.fill();
ctx.font = "40px Times New Roman";
ctx.textAlign = 'center';
ctx.textBaseline = "middle";
ctx.fillStyle = color;
ctx.fillText(this.counter, this.x, this.y);
ctx.strokeStyle = color;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 30, 0, Math.PI * 2, false);
ctx.stroke();
};
Timer.prototype.animate = function animate(time) {
requestAnimationFrame(this.animate.bind(this));
if(time - this.lastTime >= 1000 && this.counter > 0) {
this.counter--;
this.lastTime = time;
if(this.counter === 0 && "counterendCallback" in this)
requestAnimationFrame(this.counterendCallback.bind(this));
}
this.draw();
};
var timer = new Timer(document.getElementById("canvas"));
</script>