简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Utilisez le code js pour créer des cartes à gratter Web

Utilisez le code js pour créer des cartes à gratter Web

PHP中文网
PHP中文网original
2017-06-22 14:37:044598parcourir

Partagez un morceau de code pour créer des cartes à gratter en utilisant Canvas et JS. La partie JS contient moins de 20 lignes de code avec les commentaires supprimés

L'effet est le suivant

Couverture Lun.jpg


Scratch-off.gif

Partie HTML
<body> <img src="img/gailun.jpg"/> <canvas id="canvas" width="400" height="300"></canvas> </body>
Il n’y a rien à quoi prêter une attention particulière. Ajout de quelques styles CSS pour l'effet

Partie CSS
<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>
Remarque
1 Ajout de

2. doit être sous le tissu gris et ajouter un z-index ;
*{margin: 0;padding: 0;
        }
3. Positionnement absolu de l'image


partie js

Analyser la logique


1. et déplacez la zone correspondante à gratter
2. Relevez la souris pour changer la position de la souris sans continuer à gratter


code js
    <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>
Il devrait être noté que

1. L'image et la toile sont déplacées de 200px vers la gauche, donc les coordonnées du point de départ du cercle sont réduites de 200px par rapport à la position obtenue ;
2. globalCompositeOperation est une fonction du canevas, qui consiste à définir ou à renvoyer Comment dessiner une image source (nouvelle) sur l'image cible (existante), il existe 10 autres méthodes d'écriture


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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment créer un serveur simple en utilisant nodejsArticle suivant：Comment créer un serveur simple en utilisant nodejs

Articles Liés

Voir plus