如何在图像上使用clearRect？

如何解决如何在图像上使用clearRect？

这是一个学校模拟时钟项目。我只是在学习画布，对我来说还不清楚。 时钟工作正常，但我的手在每次动动后都会留下痕迹。 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,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,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,1,0); // reset transform to clear canvas
    ctx.clearRect(0,ctx.canvas.width,ctx.canvas.height);

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

    ctx.drawImage(bgImg,-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);    
}