Показать сообщение отдельно
  #2 (permalink)  
Старый 15.11.2019, 14:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

canvas timer
Jimy,
делайте полноценный макет! а не кусок кода.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<canvas id="canvas" width=300 height="300" ></canvas>
<script>
 var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var canvasW=c.width;
var canvasH=c.height;
var starttimer=90;
var color='blue';
//таймер
var timer=function(x,y){
    this.x=x;
    this.y=y;
    this.t = performance.now();
    //рисование таймера
    this.draw=function(txt){
        ctx.font="40px Times New Roman";
        ctx.textAlign='center';
        ctx.textBaseline="middle";
        ctx.fillStyle=color;
        ctx.fillText(txt,this.x,this.y);
        ctx.strokeStyle=color;
        ctx.lineWidth=3;
        ctx.beginPath();
        ctx.arc(canvasW/2,canvasH/2,30,0,Math.PI*2,false);
        ctx.stroke();

    };
            };
    //конец таймера

var Timer=new timer(canvasW/2,canvasH/2);
function animate(b){
     ctx.clearRect(0,0,canvasW,canvasH);
     ctx.fillStyle="black";
     ctx.fillRect(0,0,c.width,c.height);
     ctx.fill();
     var timer = starttimer - (b - Timer.t)/1000;
     timer = Math.max(0, timer|0);
     Timer.draw(timer);
     timer && requestAnimationFrame(animate);
};
requestAnimationFrame(animate);

</script>
</body>
</html>
Ответить с цитированием