h5canvas implementiert Scratch-Effektcode

Beim Rubbeln auf der Leinwand sind vor allem zwei Dinge zu beachten: Die erste besteht darin, die gezeichneten Grafiken als Hintergrundbilder festzulegen (mithilfe des toDataURL-Attributs), damit die gezeichneten Muster beim Überlagern nicht verloren gehen gelöscht wird,

Die zweite Möglichkeit besteht darin, die Transparenz beim Zeichnen von Illustrationen festzulegen (mithilfe des Attributs globalCompositeOperation)

Der Code lautet wie folgt:

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

【Verwandte Empfehlungen】

1. Besondere Empfehlung: Version V0.1 von „php Programmer Toolbox“ herunterladen

2. Kostenloses h5-Online-Video-Tutorial

3 php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonh5canvas implementiert Scratch-Effektcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!