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:044552Durchsuche
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
1
*{margin: 0;padding: 0;
}2 hinzugefügt muss unter dem grauen Tuch sein und den Z-Index hinzufügen;3. Absolute Positionierung des Bildes
Analysieren Sie die Logik
1 und verschieben Sie den entsprechenden Bereich zum Scrapenjs-Code2. Heben Sie die Maus an, um die Mausposition zu ändern, ohne weiter zu schaben
<script type="text/javascript">var canvas = document.getElementById("canvas");var context = canvas.getContext('2d');//画蒙布
context.beginPath();
context.fillStyle= 'grey'
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!