javascript - À propos de la rotation du canevas

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);
        });

Je veux réaliser la fonction du pointeur (pin.png) tournant sur le plateau tournant (pan.png), mais si ctx.clearRect(); apparaîtra comme indiqué sur l'image, le résultat que je veux est  ; , comment y parvenir ? ? Demander conseil

Answer 1

En raison d'informations insuffisantes, je ne peux que donner mon jugement.

1. png n'est pas transparent, la probabilité est très faible

2. Vous êtes divisé en deux toiles, mais la toile avec le pointeur a une couleur de fond, la probabilité est également très faible

3. Problème de code :

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);