Блог

Это школьный проект аналоговых часов. Я просто изучаю canvas, и многое из этого мне непонятно. Часы работают, но у меня проблема со стрелками, которые оставляют след после каждого движения. Метод clearRect решает эту проблему, но также удаляет часть изображения png. Вы знаете, как сохранить изображение постоянным, а clearRect удалить только руки?

 window.onload = draw;

let myCanvas = document.getElementById("my-canvas");
var myCtx = myCanvas.getContext('2d');

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var canvas2 = document.createElement("canvas");
var ctx2 = canvas2.getContext("2d");

var radius = myCanvas.height / 2;
myCtx.translate(radius, radius);
radius = radius * 0.90

imageBack(myCtx);
setInterval(draw, 1000);

function imageBack(ctx2) {
    var img = new Image();
    img.addEventListener(
        `load`,
        function () {
            ctx2.drawImage(img, -100, -100, 200, 200);
        },
        false
    );
    img.src = "watch1.png";
}

function draw() {
    // set Time
    postaviVreme(myCtx, radius);

    // myCtx.clearRect(-50, -50, 100, 100);
}


// set Time
function postaviVreme(ctx, radius) {
    // ctx.clearRect(-50,-50, 100,100);

    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    hour = hour % 12;
    hour = (hour * Math.PI) / 6   (minute * Math.PI) / (6 * 60)   (second * Math.PI) / (360 * 60);
    minute = (minute * Math.PI) / 30   (second * Math.PI) / (30 * 60);
    second = (second * Math.PI) / 30;

//set hours hand
    nacrtajSatnicu(ctx, hour);
// set minutes hand
    nacrtajMinutaru(ctx, minute);
// set seconds hand
    nacrtajSekundaru(ctx, second);

}

function nacrtajSatnicu(ctx, h) {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.rotate(h);
    ctx.lineTo(0, -radius * 0.3);
    ctx.strokeStyle = "black";
    ctx.closePath();
    ctx.stroke();
    ctx.rotate(-h);
}

// function nacrtajMinutaru and function nacrtajSekundaru - almost same as nacrtajSatnicu 
  

Загрузите изображение и запустите таймер при загрузке

 const bgImg = new Image();
bgImg.src = "watch1.png";
bgImg.addEventListener("load",() => setInterval(postaviVreme, 1000), {once: true});
  

Затем каждый тик часов очищает весь холст и все перерисовывает.

 // only need one canvas
const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext('2d');
const PI6 = Math.PI / 6;

function postaviVreme() {
    ctx.setTransform(1,0,0,1,0,0); // reset transform to clear canvas
    ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);

    var radius = ctx.canvas.height / 2;
    ctx.translate(radius, radius);
    radius *= 0.9;

    ctx.drawImage(bgImg, -100, -100, 200, 200);

    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    
    nacrtajSatnicu(ctx, (hour % 12   minute / 60   second / 3600) * PI6);
    nacrtajMinutaru(ctx, (minute   second  / 60) * PI6 / 5);
    nacrtajSekundaru(ctx, second * PI6 / 5);    
}