javascript - Mengenai penggiliran kanvas

Question

$("#bt-lottery").one("click",function(){
            var reg=1;
            setInterval(function(){
                ctx.save();
                ctx.translate(249.5,249.5);//将原点移动到画布中心
                ctx.rotate(reg*Math.PI/180);
                ctx.clearRect(-pin.width/2,-pin.height/2,pin.width,pin.height);
                ctx.drawImage(pin,-pin.width/2,-pin.height/2);
                ctx.restore();
                reg++;
            },5);
        });

Saya ingin merealisasikan fungsi penunjuk (pin.png) berputar pada meja putar (pan.png), tetapi jika ctx.clearRect(); , bagaimana untuk mencapainya? ? Minta nasihat

Answer 1

Disebabkan maklumat yang tidak mencukupi, saya hanya boleh memberikan pertimbangan saya.

1. png tidak telus, kebarangkalian sangat kecil

2. Anda terbahagi kepada dua kanvas, tetapi kanvas dengan penunjuk mempunyai warna latar belakang, kebarangkalian juga sangat kecil

3. Masalah kod:

setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    //这里你需要绘制背景图片（转盘），或者将转盘作为离屏canvas分离出去（因为转盘不会变动），只绘制指针。 ---我猜你缺少了这一步。。
    ctx.save();
    ctx.translate(249.5,249.5);//将原点移动到画布中心
    //ctx.clearRect(-pin.width/2,-pin.height/2,pin.width,pin.height);至于为什么清理出来的区域是个圆形跟你代码执行的顺序有关，先旋转后清理和先清理后旋转是不一样的。
    ctx.rotate(reg*Math.PI/180);
    ctx.drawImage(pin,-pin.width/2,-pin.height/2);
    ctx.restore();
    reg++;
},5);