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;*/
  • }



このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法 uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法 Oct 20, 2023 pm 02:12 PM

uniapp がミニ プログラムと H5 の間で迅速な変換を実現するには、具体的なコード例が必要ですが、近年、モバイル インターネットの発展とスマートフォンの普及に伴い、ミニ プログラムと H5 は不可欠なアプリケーション形式となっています。クロスプラットフォーム開発フレームワークとして、uniapp は一連のコードに基づいて小規模プログラムと H5 間の変換を迅速に実現し、開発効率を大幅に向上させます。この記事では、uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法と、具体的なコード例を紹介します。 1. uniapp uniaの紹介

win1121h2 と 22h2 のどちらのバージョンがより安定していますか? win1121h2 と 22h2 のどちらのバージョンがより安定していますか? Jan 04, 2024 am 08:53 AM

win1121h2 と 22h2 の 2 つのバージョンを比較すると、後者の 22h2 の方が安定しており、22h2 の方が機能が多く、前​​の 21h2 と比べて多くの機能が改善されています。 win1121h2 と 22h2 はどちらの方が安定していますか: 回答: 22h2 の方が安定しています win1121h2 と 22h2 を比較すると、22h2 の方が安定しています。 22h2では多くの機能が追加されており、21h2の問題点も22h2では改善されています。 22h2 アップデート機能: スタート メニューのアプリケーション フォルダー。 [スタート] メニューの調整可能な固定領域。タスクバーにドラッグアンドドロップします。フォーカス アシストは通知センターと統合されています。新しい「スポットライト」壁紙機能。新しい

Springboot 管理監視の役割と使用法は何ですか Springboot 管理監視の役割と使用法は何ですか May 25, 2023 pm 06:52 PM

該当するシナリオ: 1. プロジェクトの規模が大きくない 2. ユーザー数があまり多くなく、同時実行性の要件がそれほど強くない 3. 専任の運用保守要員が存在しない 4. チームの規模が絶妙である通常のプロジェクト、または企業の責任分担が明確ではない部門。多くの場合、システムは要件から設計、開発、テスト、そして最終的な立ち上げ、運用、保守へと進みます。多くの場合、タスクの 80% は開発チームによって完了されます。したがって、開発者はシステムの機能を実装するだけでなく、顧客の相談に応じ、質問に答え、生産上の問題を解決する必要もあります。想像してみてください。アプリケーションが起動された後は、監視手段が何もありません。ダッシュボードのない車を運転するのと同じように、このような道路では誰も安全を感じません。シンプルさと効率性のバランスをどう取るかは、考える価値のあることです。 1.スプリングブ

Flask-Admin を使用してバックグラウンド管理インターフェイスを実装する方法 Flask-Admin を使用してバックグラウンド管理インターフェイスを実装する方法 Aug 03, 2023 pm 11:30 PM

Flask-Admin を使用してバックエンド管理インターフェイスを実装する方法 背景の紹介: Web サイトやアプリケーションの開発に伴い、バックエンド管理インターフェイスの重要性がますます高まっています。開発プロセスでは、データ、ユーザー、その他の重要な情報を管理するために、便利で高速なバックエンド管理インターフェイスが必要になることがよくあります。 Flask-Admin は強力で使いやすい Flask 拡張機能で、バックグラウンド管理インターフェイスを迅速に実装するのに役立ちます。 Flask-Admin は、Flask と SQLAlchemy に基づいたオープンソース プロジェクトです。

win101909と21h2ではどちらが優れていますか? win101909と21h2ではどちらが優れていますか? Dec 26, 2023 pm 02:01 PM

Windows 101909 は現在、最も安定しており信頼できるバージョンの 1 つと考えられていますが、残念ながら、このバージョンのサービス サポートは最近終了しました。 21H2 は比較的安定したバージョンであり、実際の状況からすると、どちらも非常に良い選択です。 win101909 と 21h2 のどちらが優れていますか? 回答: 1909 の方が安定しており、21h2 の方が安全です。現在の環境では、1909 は依然として最も安定しており信頼できるバージョンの 1 つであると一般に考えられています。ただし、Win101909 バージョンは、2021 年 5 月 11 日に正式にサービスの提供を停止しました。WindowsServer21h2 は、大多数のユーザーに、より専門的な IT 機能のサポートを提供することに取り組んでいます。 1. 多くのユーザーによる実際のテストの後、

win1123h2 と 22h2 のどちらを選択するのが良いでしょうか? win1123h2 と 22h2 のどちらを選択するのが良いでしょうか? Dec 28, 2023 pm 03:09 PM

Windows 11 システムの 23h2 バージョンと 22h2 バージョンは、それぞれ 2023 年と 2022 年にリリースされる予定です。一般的に、システム アップデートはますます改善されています。編集者も、23h2 バージョンは 22h2 バージョンよりも優れていると考えています。 win1123h2 と 22h2 のどちらが優れていますか? 回答: win1123h2 の方が優れています。報告によると、win1123h2 は 22h2 から次のバージョンへの累積的なバージョン アップデートであり、プラットフォームはすべて同じです。これは、2 つのバージョン間に互換性の問題がないことを意味するため、適時に更新することをお勧めします。 win1123h2 バージョンでは、タスクバー ウィンドウ アプリケーションのマージ禁止モードなど、多くの実用的な機能が提供されます。他にもあります

このファイルを変更するには、管理者から提供されたアクセス許可が必要です。この問題を解決するにはどうすればよいですか? このファイルを変更するには、管理者から提供されたアクセス許可が必要です。この問題を解決するにはどうすればよいですか? Jul 26, 2023 am 10:56 AM

このファイルを変更するには、管理者から提供されたアクセス許可が必要です。解決策: 1. ログイン インターフェイスで管理者アカウントを選択し、パスワードを入力すると、ファイルをスムーズに変更できます。2. ファイルを右クリックして、 「管理者として」の解決策: 3. ファイルのアクセス許可を変更し、ファイルを右クリックして「プロパティ」を選択し、「セキュリティ」タブをクリックして「編集」ボタンをクリックし、ユーザー名を選択して「フル コントロール」にチェックを入れます。オプション ; 4. コマンド プロンプトを使用して問題を解決します; 5. UA 権限を設定します。

Win11 23H2アップデートが取得できない問題を解決 Win11 23H2アップデートが取得できない問題を解決 Jan 14, 2024 pm 09:24 PM

最近、誰もが Win11 の 23H2 バージョンにアップデートしたいと考えていますが、少数のユーザーがアップデートのプッシュ メッセージをまだ受け取っていません。バックグラウンドでのアップデートの進行中のプロセスが停止している可能性があり、しばらくすると正常になります。 Win11 アップデートが 23H2 を取得できない場合の対処方法. 方法 1: 辛抱強く待つ. ユーザーがコンピューターのアップデート ステータスを確認し、スタックしていることがわかった場合は、しばらく待つことができ、システムはアップデートを続行します。方法 2: 更新されたキャッシュをクリアします。ユーザーが以前にシステムを更新していて、より詳細なキャッシュをクリアしていない場合は、23h2 の通常の更新に影響します。手動でクリアできます。方法 3: イメージ インストールを使用する Microsoft の公式 Web サイトにアクセスして win1123h2 のイメージ ファイルをダウンロードし、ファイルを更新することをお勧めします。

See all articles