h5canvas implémente le code d'effet scratch

Il y a deux choses principales à prendre en compte lors de l'implémentation du grattage sur toile : la première est de définir les graphiques dessinés comme images d'arrière-plan (en utilisant l'attribut toDataURL), afin que les motifs dessinés ne soient pas perdus lors de la superposition. est effacé,

La seconde consiste à définir la transparence lors du dessin d'illustrations (en utilisant l'attribut globalCompositeOperation)

Le code est le suivant :

<script>
    var arr=[
        {name:"iphone7 磨砂黑",color:"rgba(255,255,0,1)"},
        {name:"iphone7 磨砂黑",color:"rgba(0,255,0,.9)"},
        {name:"iphone7 磨砂黑",color:"rgba(10,255,255,1)"},
        {name:"iphone7 磨砂黑",color:"rgba(10,255,100,1)"}
    ]
    var r=Math.random();
    var rIndex= Math.floor(r*arr.length);
    var rPrice=arr[rIndex];
    var cv=document.getElementsByTagName(&#39;canvas&#39;)[0];
    var isDown=false;
    cv.height=400;
    cv.width=600;
    var ctx=cv.getContext("2d");
    function toAngle(radian){
        return radian/Math.PI*180;
    }
    function toRadian(angle){
        return angle/180*Math.PI;
    }
    ctx.textAlign="center";
    ctx.textBaseline="middle";
    ctx.font="30px consolas";
    ctx.fillStyle=rPrice.color;
    ctx.fillText(rPrice.name,cv.width/2,cv.height/2);

    var dataURL=cv.toDataURL("image/jpg",1);
    cv.style.background="url("+dataURL+")";

    //覆盖层
    ctx.beginPath();
    ctx.fillStyle="#eee";
    ctx.fillRect(0,0,cv.width,cv.height);

    cv.addEventListener("mousedown",function(){
        isDown=true;
    })
    cv.addEventListener("mouseup",function(){
        isDown=false;
        ctx.globalCompositeOperation="source-out"
    })
    cv.addEventListener("mousemove",function(e){
        if (isDown){
            ctx.globalCompositeOperation="destination-out";
            ctx.beginPath();
            var posObj=cv.getBoundingClientRect();

            var left=posObj.left;
            var top=posObj.top;

            var x= e.clientX-left;
            var y= e.clientY-top;

            ctx.arc(x,y,50,0,Math.PI*2);
            ctx.fill();
        }
    })
</script>

【Recommandations associées】

1. Recommandation spéciale : Téléchargez la version V0.1 de "php Programmer Toolbox"

2. Tutoriel vidéo en ligne h5 gratuit

3. Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!