Maison interface Web Tutoriel H5 canvas 像素级碰撞

canvas 像素级碰撞

May 17, 2016 am 09:08 AM
admin h

demo地址http://06wjin.sinaapp.com/html5/hitTest/     用鼠标拖动

1首先先判断两个图片的矩形区域有无碰撞

判断两个矩形的中心距离即可

2如果矩形区域有碰撞则检测上图红色矩形区域的像素,这里有两种方法
a 直接判断,循环检测两位图在红色矩形内是否有一点像素的alpha点都不为0,如果有则说明碰撞

  • context.drawImage(img1, x1, y1);//画第一张位图
  •         var data1 = context.getImageData(minx, miny, maxx - minx, maxy - miny).data;//获取第一张位图红色矩形内像素
  •         context.clearRect(x1, y1,img1.width,img1.height);//清除第一张位图
  •         context.drawImage(img2, x2, y2);//画第二张位图
  •         var data2 = context.getImageData(minx, miny, maxx - minx, maxy - miny).data;//获取第二章位图红色矩形内像素

  •         for(var i = 3; i
  •         {
  •       if(data1 > 0 && data2 > 0) return true;//循环判断alpha值,这里可以设置透明阙值,比如把0改为0.2,意味着透明度为0.2时就认为不碰撞了
  •         }
  •         return false;




b将绘图模式改为xor(xor是指相交部分透明,具体见站长上篇教程),也可以判断
  • context.drawImage(img1, x1,y1);//画第一张位图
  •         context.globalCompositeOperation = 'xor';//改绘图模式为xor
  •         context.drawImage(img2, x2,y2);//画第二张位图
  •         var data = context.getImageData(minx, miny, maxx - minx, maxy - miny).data;//获取位图红色矩形内像素
  •         context.globalCompositeOperation = 'source-over';//把绘图模式改回去

  •         for(var i = 3; i
  •         {

  •                 if(data == 0 ) return true;//若有透明像素,则碰撞
  •         }
  •         return false;



下面是一个2d精灵类,碰撞直接用sprite1.hitTest(sprite2)就好
  • function Sprite(x, y, img, width, height)
  • {
  •     this.x = x;
  •     this.y = y;
  •     this.img = document.getElementById(img);
  •     this.width = width;
  •     this.height = height;
  •     this.halfWidth = this.width/2;
  •     this.halfHeight = this.height/2;
  •     this.angle = 0;角度
  •     this.scaleX = 1;//水平缩放
  •     this.scaleY = 1;//竖直缩放
  •     this.alpha = 1;//透明度
  •     this.isDrug = false;//是否拖到
  • }

  • Sprite.prototype.draw = function()
  • {
  •    context.save();
  •    context.translate(this.x + this.halfWidth, this.y + this.halfHeight);
  •    context.globalAlpha = this.alpha;//修改透明度
  •    context.rotate(this.angle);//旋转角度
  •    context.scale(this.scaleX, this.scaleY);//缩放
  •    context.drawImage(this.img, -this.halfWidth, -this.halfHeight);
  •    context.restore();
  • }

  • Sprite.prototype.hitTest = function(sprite)
  • {
  •         var minx = this.x > sprite.x ? this.x :sprite.x;
  •         var maxx = this.x + this.width
  •         var miny = this.y > sprite.y ? this.y : sprite.y;
  •         var maxy = this.y + this.width

  •         if (minx >= maxx || miny >= maxy) {return false;}

  •         var canvas = document.createElement('canvas');
  •         canvas.setAttribute('width', 550);
  •         canvas.setAttribute('height', 400);
  •         var context = canvas.getContext('2d');


  •         /*第一种方法*/
  •         context.drawImage(this.img, this.x, this.y);
  •         var data1 = context.getImageData(minx, miny, maxx - minx, maxy - miny).data;
  •         context.clearRect(0, 0, 550, 400);
  •         context.drawImage(sprite.img, sprite.x, sprite.y);
  •         var data2 = context.getImageData(minx, miny, maxx - minx, maxy - miny).data;

  •         for(var i = 3; i
  •         {
  •                 if(data1 > 0 && data2 > 0) return true;
  •         }
  •         return false;

  •         /*第二种方法
  •         context.drawImage(this.img, this.x, this.y);
  •         context.globalCompositeOperation = 'xor';
  •         context.drawImage(sprite.img, sprite.x, sprite.y);
  •         var data = context.getImageData(minx, miny, maxx - minx, maxy - miny).data;
  •         context.globalCompositeOperation = 'source-over';

  •         for(var i = 3; i
  •         {

  •                 if(data == 0 ) return true;
  •         }
  •         return false;*/
  • }



Déclaration de ce site Web
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

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)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment Uniapp réalise une conversion rapide entre les mini-programmes et H5 Comment Uniapp réalise une conversion rapide entre les mini-programmes et H5 Oct 20, 2023 pm 02:12 PM

La manière dont Uniapp peut réaliser une conversion rapide entre les mini-programmes et le H5 nécessite des exemples de code spécifiques. Ces dernières années, avec le développement de l'Internet mobile et la popularité des smartphones, les mini-programmes et le H5 sont devenus des formulaires de candidature indispensables. En tant que cadre de développement multiplateforme, uniapp peut réaliser rapidement la conversion entre les petits programmes et H5 sur la base d'un ensemble de codes, améliorant considérablement l'efficacité du développement. Cet article présentera comment Uniapp peut réaliser une conversion rapide entre les mini-programmes et H5, et donnera des exemples de code spécifiques. 1. Introduction à uniapp unia

Quelle version est la plus stable : win1121h2 ou 22h2 ? Quelle version est la plus stable : win1121h2 ou 22h2 ? Jan 04, 2024 am 08:53 AM

En comparant les deux versions de win1121h2 et 22h2, cette dernière 22h2 est plus stable et 22h2 a plus de fonctions Par rapport au 21h2 précédent, jetons un coup d'œil. Lequel est le plus stable, win1121h2 ou 22h2 : Réponse : 22h2 est plus stable. En comparant win1121h2 et 22h2, 22h2 est plus stable. 22h2 ajoute beaucoup de fonctionnalités, et les problèmes de 21h2 ont également été améliorés en 22h2. Fonctionnalité de mise à jour 22h2 : dossier Applications dans le menu Démarrer. Zone fixe réglable dans le menu Démarrer. Glissez-déposez sur la barre des tâches. Focus Assist est intégré au centre de notifications. Nouvelle fonctionnalité de fond d'écran "Spotlight". nouveau

Quel est le rôle et l'utilisation de la surveillance de l'administrateur Springboot Quel est le rôle et l'utilisation de la surveillance de l'administrateur Springboot May 25, 2023 pm 06:52 PM

Scénarios applicables : 1. L'échelle du projet n'est pas grande. 2. Le nombre d'utilisateurs n'est pas très grand et les exigences de concurrence ne sont pas fortes. 3. Il n'y a pas de force d'exploitation et de maintenance dédiée. 4. Taille d'équipe exquise. des projets réguliers ou des unités où la répartition des responsabilités n'est pas très claire. Souvent, un système va des exigences à la conception, au développement, aux tests jusqu'au lancement final, à l'exploitation et à la maintenance. Souvent, 80 % des tâches sont réalisées par l’équipe de développement. Par conséquent, en plus de mettre en œuvre les fonctions du système, les développeurs doivent également fournir aux clients des conseils, répondre aux questions et résoudre les problèmes de production. Imaginez, après le lancement d’une application, il n’y a aucune mesure de surveillance. Tout comme conduire une voiture sans tableau de bord, personne ne se sent en sécurité sur la route comme celle-ci. Comment concilier simplicité et efficacité mérite réflexion. 1. Printempsb

Comment utiliser Flask-Admin pour implémenter l'interface de gestion en arrière-plan Comment utiliser Flask-Admin pour implémenter l'interface de gestion en arrière-plan Aug 03, 2023 pm 11:30 PM

Comment utiliser Flask-Admin pour implémenter l'interface de gestion backend Introduction de fond : Avec le développement de sites Web et d'applications, l'interface de gestion backend devient de plus en plus importante. Pendant le processus de développement, nous avons souvent besoin d’une interface de gestion backend pratique et rapide pour gérer les données, les utilisateurs et autres informations importantes. Flask-Admin est une extension Flask puissante et facile à utiliser qui peut nous aider à implémenter rapidement l'interface de gestion en arrière-plan. Flask-Admin est un projet open source basé sur Flask et SQLAlchemy

Lequel est le meilleur entre win101909 et 21h2 ? Lequel est le meilleur entre win101909 et 21h2 ? Dec 26, 2023 pm 02:01 PM

Windows 101909 est actuellement considéré comme l'une des versions les plus stables et les plus fiables. Malheureusement, le support technique pour cette version a récemment pris fin. 21H2 est une version relativement stable. En fait, d'après la situation actuelle, les deux sont de très bons choix. Lequel est le meilleur, win101909 ou 21h2 ? Réponse : 1909 est plus stable et 21h2 sera plus sécurisé. Dans l’environnement actuel, 1909 est encore généralement considérée comme l’une des versions les plus stables et les plus fiables. Cependant, la version Win101909 a officiellement cessé de fonctionner le 11 mai 2021. WindowsServer21h2 s'engage à fournir une prise en charge plus professionnelle des fonctions informatiques à la majorité des utilisateurs. 1. Après des tests réels par de nombreux utilisateurs,

Quel est le meilleur choix : win1123h2 ou 22h2 ? Quel est le meilleur choix : win1123h2 ou 22h2 ? Dec 28, 2023 pm 03:09 PM

La version 23h2 et la version 22h2 dans le système Windows 11 sortiront respectivement en 2023 et 2022. De manière générale, les mises à jour du système s'améliorent de plus en plus. L'éditeur estime également que la version 23h2 est meilleure que la version 22h2. Lequel est le meilleur, win1123h2 ou 22h2 ? Réponse : win1123h2 est le meilleur. Selon les rapports, win1123h2 est une mise à jour de version cumulative de 22h2 vers la version suivante, et ils sont tous sur la même plate-forme. Cela signifie qu'il n'y a aucun problème de compatibilité entre les deux versions. Il est recommandé de les mettre à jour à temps. La version win1123h2 nous apporte de nombreuses fonctionnalités pratiques, comme le mode sans fusion pour les applications de la fenêtre de la barre des tâches. Il y a plus

Vous avez besoin des autorisations fournies par l'administrateur pour apporter des modifications à ce fichier. Comment résoudre ce problème ? Vous avez besoin des autorisations fournies par l'administrateur pour apporter des modifications à ce fichier. Comment résoudre ce problème ? Jul 26, 2023 am 10:56 AM

Vous avez besoin des autorisations fournies par l'administrateur pour apporter des modifications à ce fichier. Solution : 1. Après avoir sélectionné le compte administrateur sur l'interface de connexion et saisi le mot de passe, vous pouvez modifier le fichier en douceur. 2. Vous pouvez cliquer avec le bouton droit sur le fichier et sélectionner ; Méthode « En tant qu'administrateur » « Exécuter en tant que » ; 3. Modifiez les autorisations du fichier, cliquez avec le bouton droit sur le fichier, sélectionnez « Propriétés », cliquez sur l'onglet « Sécurité », puis cliquez sur le bouton « Modifier », sélectionnez votre nom d'utilisateur, puis vérifiez le Option "Contrôle total" ; 4. Utilisez l'invite de commande pour résoudre le problème ; 5. Définissez les autorisations UA.

Résolvez le problème de ne pas obtenir la mise à jour Win11 23H2 Résolvez le problème de ne pas obtenir la mise à jour Win11 23H2 Jan 14, 2024 pm 09:24 PM

Tout le monde souhaite mettre à jour la version 23H2 de Win11 récemment, mais un petit nombre d'utilisateurs n'ont pas encore reçu le message push de mise à jour. Il se peut qu'un processus dans la progression de la mise à jour en arrière-plan soit bloqué, et tout ira bien après un certain temps. Que faire si la mise à jour Win11 ne parvient pas à obtenir 23H2. Méthode 1 : Attendez patiemment. Si l'utilisateur vérifie l'état de la mise à jour de l'ordinateur et constate qu'il est bloqué, nous pouvons attendre un moment et le système continuera à se mettre à jour. Méthode 2 : Effacer le cache mis à jour Si l'utilisateur a déjà mis à jour le système et n'a pas effacé le cache plus détaillé, cela affectera la mise à jour normale de 23h2. Troisième méthode : utiliser l'installation d'image Il est recommandé d'accéder au site Web officiel de Microsoft pour télécharger le fichier image win1123h2, puis de mettre à jour le fichier.

See all articles