canvas 像素级碰撞
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;*/
- }

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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

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