Heim > Artikel > Web-Frontend > Verwenden Sie JS-Code, um Web-Rubbellose zu erstellen

Verwenden Sie JS-Code, um Web-Rubbellose zu erstellen

PHP中文网Original: 2017-06-22 14:37:044587Durchsuche

Teilen Sie einen Code zum Erstellen von Rubbellosen mit Canvas und JS. Der JS-Teil besteht aus weniger als 20 Codezeilen, wobei die Kommentare entfernt wurden

Der Effekt ist wie folgt

Cover Lun.jpg

Scratch-off.gif

HTML-Teil

<body> <img src="img/gailun.jpg"/> <canvas id="canvas" width="400" height="300"></canvas> </body>

Es gibt nichts, worauf man besonders achten muss. Einige CSS-Stile für den Effekt hinzugefügt

CSS-Teil

<style type="text/css">*{margin: 0;padding: 0;
        }img{width: 400px;height: 300px;left: 200px;position: absolute;z-index: -1;
            }canvas{margin-left:200px;
            }</style>

Hinweis

*{margin: 0;padding: 0;
        }

2 hinzugefügt muss unter dem grauen Tuch sein und den Z-Index hinzufügen;

3. Absolute Positionierung des Bildes

js-Teil

Analysieren Sie die Logik

1 und verschieben Sie den entsprechenden Bereich zum Scrapen
2. Heben Sie die Maus an, um die Mausposition zu ändern, ohne weiter zu schaben

js-Code

    <script type="text/javascript">var canvas = document.getElementById("canvas");var  context =  canvas.getContext(&#39;2d&#39;);//画蒙布
        context.beginPath();
        context.fillStyle= &#39;grey&#39;
        context.fillRect(0,0,400,300);//鼠标按下开刮
        canvas.onmousedown=function(){
            canvas.onmousemove = function(){//获取鼠标坐标var x = event.clientX;var y  = event.clientY;//destination-out             显示原来的不在后来区域的部分
                context.globalCompositeOperation = "destination-out";
                context.beginPath();
                context.arc(x-200,y,30,0,Math.PI*2);
                context.fill();        
            }
        }//鼠标抬起不刮开
        canvas.onmouseup=function(){
            canvas.onmousemove = function(){    
            }
        }    </script>

So sollte es sein Beachten Sie, dass

1 Das Bild und die Leinwand um 200 Pixel nach links verschoben werden, sodass die Startpunktkoordinaten des Kreises um 200 Pixel im Verhältnis zur erhaltenen Position reduziert werden;
2. globalCompositeOperation ist eine Funktion der Leinwand, die festlegt oder zurückgibt. So zeichnen Sie ein Quellbild (neu) in das Zielbild (vorhanden) ein. Es gibt 10 weitere Schreibmethoden

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS-Code, um Web-Rubbellose zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie einen einfachen Server mit NodeJSNächster Artikel：So erstellen Sie einen einfachen Server mit NodeJS

In Verbindung stehende Artikel

Mehr sehen