recherche
Maisoninterface WebTutoriel H5La balise de toile HTML5 implémente les compétences du didacticiel effect_html5 sur les cartes à gratter

Avez-vous déjà joué aux cartes à gratter ? Le genre où vous pouvez gagner un prix par accident. Aujourd'hui, je vais partager avec vous un effet de carte à gratter basé sur la technologie HTML5. Sur PC, il vous suffit de maintenir la souris enfoncée. Sur les téléphones mobiles, il vous suffit de maintenir votre doigt enfoncé et de gratter doucement le calque pour simuler le véritable scratch. effet.

Téléchargement du code source : Cliquez pour télécharger

Nous utilisons le HTML5 Canvas, combiné à l'API qu'il fournit, pour dessiner un calque de masque gris sur l'élément Canvas, puis dessinons un graphique transparent en détectant les mouvements et les gestes de la souris de l'utilisateur, afin que vous puissiez voir l'arrière-plan du Canvas. De vraies images peuvent obtenir l'effet de carte à gratter.

HTML

Il suffit d'ajouter l'élément de balise canvas à la page, et le reste dépend de JavaScript. Notez que l'élément canvas est un élément unique à HTML5 et s'exécute sur les navigateurs modernes prenant en charge HTML5.

Copier le code
Le code est le suivant :




Javascript

Tout d'abord, nous devons désactiver l'événement de sélection et de glissement de la souris sur la page, c'est-à-dire ne pas exécuter l'opération de sélection.

Copier le code
Le code est le suivant :

var bodyStyle = document.body .style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';

Ensuite, nous définissons la classe d'image, obtenons l'élément canevas et définissons l'arrière-plan. et les attributs de position. Nous utilisons deux photos aléatoires dans cet exemple et actualisons à chaque fois une photo aléatoire comme arrière-plan.

Copier le code
Le code est le suivant :

var img = new Image( );
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute'; 'p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2);
img.src =

Entrez ensuite le corps principal. Lorsqu'il est détecté que l'image est chargée, définissez d'abord certaines propriétés et fonctions. La fonction layer() est utilisée pour dessiner un carré gris eventDown() définit l'événement de presse eventUp(). définit l'événement de libération. eventMove () définit l'événement de mouvement dans lequel, lorsqu'on appuie dessus, le déplacement des coordonnées est obtenu et le petit point est dessiné à travers l'arc (x, y, 10, 0, Math.PI * 2).


Copier le codeLe code est le suivant :
img.addEventListener('load ', function (e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop ;
var mousedown = false;

function layer(ctx) {
ctx.fillStyle = 'gray'; > }

function eventDown(e){
e.preventDefault();
mousedown=true;
}

function eventUp(e){
e .preventDefault( );
mousedown=false;
}

function eventMove(e){
e.preventDefault(); e.changedTouches ){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX document.body.scrollLeft || e.pageX) - offsetX || 0 ,
y = (e.clientY document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
startPath()
arc(x , y, 10, 0, Math.PI * 2);//Dessinez le point
fill();
}
}
}

//...
} );


Enfin, appelez les fonctions ci-dessus via Canvas, dessinez des graphiques, écoutez les événements tactiles et de la souris et appelez les fonctions correspondantes :

.


Copier le code
Le code est le suivant :

img.addEventListener('load', function(e) {
//..前のコードからの続き
Canvas.width=w;
Canvas.height=h;
Canvas.style.backgroundImage='url(' img.src ')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent'; (0 , 0, w, h);//長方形を描画します
Layer(ctx);

ctx.globalCompositeOperation = 'destination-out'

Canvas.addEventListener(' touchstart'、eventDown);
Canvas.addEventListener('touchmove'、eventMove);
Canvas.addEventListener('mousedown'、eventUp); > Canvas.addEventListener('mouseup',eventUp);
canvas.addEventListener('mousemove',eventMove);


デモで完全なコードをダウンロードできます。実際のニーズに応じた背景を使用して、実際のスクラッチ カード プログラムを完成させるためのプログラムとデータベース
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
Comprendre le code H5: les principes fondamentaux de HTML5Comprendre le code H5: les principes fondamentaux de HTML5Apr 17, 2025 am 12:08 AM

HTML5 est une technologie clé pour créer des pages Web modernes, offrant de nombreux nouveaux éléments et fonctionnalités. 1. HTML5 introduit des éléments sémantiques tels que, etc., qui améliore la structure des pages Web et le référencement. 2. Prise en charge des éléments multimédias et des supports intégrés sans plug-ins. 3. Les formulaires améliorent les nouveaux types d'entrée et les propriétés de vérification, simplifiant le processus de vérification. 4. Offrez des fonctions de stockage hors ligne et locales pour améliorer les performances des pages Web et l'expérience utilisateur.

Code H5: meilleures pratiques pour les développeurs WebCode H5: meilleures pratiques pour les développeurs WebApr 16, 2025 am 12:14 AM

Les meilleures pratiques pour le code H5 incluent: 1. Utilisez des déclarations de doctype correctes et l'encodage des caractères; 2. Utilisez des balises sémantiques; 3. Réduire les demandes HTTP; 4. Utiliser le chargement asynchrone; 5. Optimiser les images. Ces pratiques peuvent améliorer l'efficacité, la maintenabilité et l'expérience utilisateur des pages Web.

H5: L'évolution des normes et technologies WebH5: L'évolution des normes et technologies WebApr 15, 2025 am 12:12 AM

Les normes et technologies Web ont évolué à ce jour de HTML4, CSS2 et JavaScript simple et ont subi des développements importants. 1) HTML5 introduit des API telles que Canvas et WebStorage, ce qui améliore la complexité et l'interactivité des applications Web. 2) CSS3 ajoute des fonctions d'animation et de transition pour rendre la page plus efficace. 3) JavaScript améliore l'efficacité de développement et la lisibilité du code par la syntaxe moderne de Node.js et ES6, telles que les fonctions et classes Arrow. Ces changements ont favorisé le développement de l'optimisation des performances et les meilleures pratiques des applications Web.

H5 est-il un raccourci pour HTML5? Explorer les détailsH5 est-il un raccourci pour HTML5? Explorer les détailsApr 14, 2025 am 12:05 AM

H5 n'est pas seulement l'abréviation de HTML5, il représente un écosystème de technologie de développement Web moderne plus large: 1. H5 comprend HTML5, CSS3, JavaScript et API et technologies connexes; 2. Il offre une expérience utilisateur plus riche, interactive et fluide et peut fonctionner de manière transparente sur plusieurs appareils; 3. À l'aide de la pile de technologie H5, vous pouvez créer des pages Web réactives et des fonctions interactives complexes.

H5 et HTML5: termes couramment utilisés dans le développement WebH5 et HTML5: termes couramment utilisés dans le développement WebApr 13, 2025 am 12:01 AM

H5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.

À quoi se réfère H5? Explorer le contexteÀ quoi se réfère H5? Explorer le contexteApr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

H5: outils, cadres et meilleures pratiquesH5: outils, cadres et meilleures pratiquesApr 11, 2025 am 12:11 AM

Les outils et les frameworks qui doivent être maîtrisés dans le développement H5 incluent Vue.js, React et WebPack. 1.Vue.js convient à la construction d'interfaces utilisateur et prend en charge le développement des composants. 2. React optimise le rendu de la page via Virtual DOM, adapté aux applications complexes. 3.WebPack est utilisé pour l'emballage des modules et optimiser le chargement des ressources.

L'héritage de HTML5: Comprendre H5 dans le présentL'héritage de HTML5: Comprendre H5 dans le présentApr 10, 2025 am 09:28 AM

Html5hassignifytransformedwebdevelopmentByIntroduCingSémanticElements, améliorant laMultimeSupport, et improvingperformance.1) itmadewebsitesMoreAccessSiblendSeo-friendlywithsemiticslike, et.2)

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft