Canvas が github404 ダイナミクスを実装する方法
今回は、Canvas を使用して github404 Dynamics を実装する方法と、Canvas を使用して github404 Dynamics を実装する際の注意事項について説明します。以下は実際のケースです。
数日前、github404の似たようなインターフェースに敬意を表してcssスタイルとjsを使用しましたが、同時に最近canvasにも触れてみようと思い、以前のjsを使用しました。 Canvas を使用して github404 の動的効果を完成させるためのアルゴリズム。 ファイルリソースファイルのソースコードとコードdisplay:none を設定する必要はありません。
<body>
<canvas id="mycanvas" width="1680" height="630"
style="margin:0;display:block">
您的浏览器不支持canvas
</canvas>
<img src="./images/field.png" style="display:none">
<img src="./images/text.png" style="display:none">
<img src="./images/cat.png" style="display:none">
<img src="./images/cat_shadow.png" style="display:none">
<img src="./images/speeder.png" style="display:none">
<img src="./images/speeder_shadow.png" style="display:none">
<img src="./images/buliding_1.png" style="display:none">
<img src="./images/building_2.png" style="display:none">
</body><script>
var github404 = {
imgData: {//将所有图片的信息用json对象记录
bg: {
top: 0,
left: 110,//top和left用于定位，在画图时使用
src: './images/field.png',//对应图片路径
scale: 0.06,//鼠标移动时，该图片所对应移动的比例
},
building_2: {
top: 133,
left: 1182,
src: './images/building_2.png',
scale: 0.05,
},
building_1: {
top: 79,
left: 884,
src: './images/buliding_1.png',
scale: 0.03,
},
speeder_shadow: {
top: 261,
left: 776,
src: './images/speeder_shadow.png',
scale: 0.01,
},
cat_shadow: {
top: 288,
left: 667,
src: './images/cat_shadow.png',
scale: 0.02,
},
speeder: {
top: 146,
left: 777,
src: './images/speeder.png',
scale: 0.01,
},
cat: {
top: 88,
left: 656,
src: './images/cat.png',
scale: 0.05,
},
text: {
top: 70,
left: 364,
src: './images/text.png',
scale: 0.03,
},
},
rate_w: 0,
rate_h: 0,//偏移的比例
field_width: 1680,
field_height: 370,//背景高度和宽度
canvas: document.querySelector('#mycanvas'),//获得canvas元素
init: function() {//初始化加载方法
this.setRateWH();
this.placeImg();
this.attachMouseEvent();
},
setRateWH: function() {//计算偏移比的方法
var window_width = document.body.clientWidth;
var window_height = document.body.clientHeight;
this.rate_w = this.field_width/window_width;
this.rate_h = this.field_height/window_height;
},
placeImg: function() {//初始化的绘图方法
let ctx = this.canvas.getContext('2d');//获得画笔
for(key in this.imgData){//遍历imageData 对象
var image = new Image();
var left = this.imgData[key].left;
var top = this.imgData[key].top;
image.src = this.imgData[key].src;
ctx.drawImage(image,left,top,
image.width,image.height);
}
},
attachMouseEvent: function() {
var that = this;
document.body.onmousemove = function(e){
that.picMove(e.pageX,e.pageY);
}
},
picMove: function(pageX,pageY) {//鼠标移动时重新画图的方法
let ctx = this.canvas.getContext('2d');
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
for(key in this.imgData) {
var image = new Image();
var offer_w = this.rate_w * pageX * this.imgData[key].scale;
var offer_h = this.rate_h * pageY * this.imgData[key].scale;
//定义 left和top,下面画图时给参数定位
var left = this.field_width/100 - offer_w + this.imgData[key].left;
var top = this.field_height/100 - offer_h + this.imgData[key].top;
image.src = this.imgData[key].src;
ctx.drawImage(image,left,top,
image.width,image.height);
}
}
}
window.onload = function() {
//只调用github404的init方法 封装了数据
github404.init();
}
</script>HTML5 のドロップダウン ボックスでユーザー エクスペリエンスを向上させる方法
H5 ファイル フィールド FileReader がファイルをセクションごとに読み取り、サーバーにアップロードする方法
方法同じインターフェイスで H5 の WebGL を使用する json と echarts チャートを作成する
以上がCanvas が github404 ダイナミクスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホット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）
ホットトピック
7503
15
1377
52
78
11
19
54
VirtualBox 固定ディスクをダイナミック ディスクに、またはその逆に変換します
Mar 25, 2024 am 09:36 AM
仮想マシンを作成するときに、ディスクの種類を選択するように求められます。固定ディスクまたはダイナミック ディスクを選択できます。固定ディスクを選択した後でダイナミック ディスクが必要であることに気付いた場合、またはその逆の場合はどうすればよいでしょうか? いいですね!一方をもう一方に変換できます。この記事では、VirtualBox 固定ディスクをダイナミック ディスクに、またはその逆に変換する方法を説明します。ダイナミック ディスクは、最初は小さいサイズですが、仮想マシンにデータを保存するにつれてサイズが大きくなる仮想ハード ディスクです。ダイナミック ディスクは、必要なだけのホスト ストレージ スペースのみを使用するため、ストレージ スペースを節約するのに非常に効率的です。ただし、ディスク容量が増加すると、コンピュータのパフォーマンスがわずかに影響を受ける可能性があります。仮想マシンでは固定ディスクとダイナミック ディスクが一般的に使用されます
Windows 11でダイナミックディスクをベーシックディスクに変換する方法
Sep 23, 2023 pm 11:33 PM
Windows 11 でダイナミック ディスクをベーシック ディスクに変換する場合は、プロセスによってその中のすべてのデータが消去されるため、最初にバックアップを作成する必要があります。 Windows 11 でダイナミック ディスクをベーシック ディスクに変換する必要があるのはなぜですか? Microsoft によると、ダイナミック ディスクは Windows から廃止され、その使用は推奨されなくなりました。さらに、Windows Home Edition はダイナミック ディスクをサポートしていないため、これらの論理ドライブにアクセスできません。より多くのディスクを結合してより大きなボリュームを作成する場合は、ベーシック ディスクまたは記憶域スペースを使用することをお勧めします。この記事では、Windows 11 でダイナミック ディスクをベーシック ディスクに変換する方法を説明します。 Windows 11 でダイナミック ディスクをベーシック ディスクに変換するにはどうすればよいですか?初めに
HTML、CSS、jQuery を使用して動的な画像カルーセルを作成する方法
Oct 25, 2023 am 10:09 AM
HTML、CSS、jQuery を使用して動的な画像カルーセルを作成する方法 Web サイトのデザインや開発において、画像カルーセルは複数の画像や広告バナーを表示するために頻繁に使用される機能です。 HTML、CSS、jQuery を組み合わせることで、動的な画像カルーセル効果を実現し、Web サイトに活気と魅力を加えることができます。この記事では、HTML、CSS、jQuery を使用して簡単な動的画像カルーセルを作成する方法と、具体的なコード例を紹介します。ステップ 1: HTML ジャンクションを設定する
html2canvas にはどのようなバージョンがありますか?
Aug 22, 2023 pm 05:58 PM
html2canvas のバージョンには、html2canvas v0.x、html2canvas v1.x などが含まれます。詳細な紹介: 1. html2canvas v0.x (html2canvas の初期バージョン) 最新の安定バージョンは v0.5.0-alpha1 です。これは、多くのプロジェクトで広く使用され、検証されている成熟したバージョンです。2. html2canvas v1.x、これは html2canvas の新しいバージョンです。
uniapp は、キャンバスを使用してチャートやアニメーション効果を描画する方法を実装します。
Oct 18, 2023 am 10:42 AM
キャンバスを使用して uniapp でチャートやアニメーション効果を描画する方法には、特定のコード例が必要です。 1. はじめに モバイル デバイスの普及に伴い、モバイル端末上でさまざまなチャートやアニメーション効果を表示する必要があるアプリケーションがますます増えています。 uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークとして、キャンバスを使用してチャートやアニメーション効果を描画する機能を提供します。この記事では、uniapp がキャンバスを使用してチャートやアニメーション効果を実現する方法を紹介し、具体的なコード例を示します。 2.キャンバス
MyBatis での動的 SQL タグの解析: タグの選択
Feb 24, 2024 pm 12:15 PM
ダイナミック SQL は、MyBatis フレームワークの非常に重要な機能の 1 つであり、さまざまな条件に応じて SQL ステートメントを動的に結合および処理し、柔軟な SQL 操作を実現します。このうち、選択タグは動的 SQL の重要なタグであり、主に条件付き選択ロジックを実装するために使用されます。この記事では、MyBatis での選択タグの使用法を調査し、デモンストレーション用の具体的なコード例を示します。 1. 選択タグの基本構文 MyBatis には、選択タグの主な形式が 2 つあります。
キャンバス フレームワークを学び、一般的に使用されるキャンバス フレームワークについて詳しく説明します
Jan 17, 2024 am 11:03 AM
Canvas フレームワークを探索する: 一般的に使用される Canvas フレームワークを理解するには、特定のコード例が必要です。 はじめに: Canvas は HTML5 で提供される描画 API であり、これを通じて豊富なグラフィックスやアニメーション効果を実現できます。描画の効率と利便性を向上させるために、多くの開発者がさまざまな Canvas フレームワークを開発しました。この記事では、一般的に使用される Canvas フレームワークをいくつか紹介し、読者がこれらのフレームワークの使用方法をより深く理解できるように、具体的なコード例を示します。 1.EaselJSフレームワークEa
Python を使用して動的でインタラクティブな地理グラフを描画する方法
Sep 28, 2023 pm 09:37 PM
Python で動的でインタラクティブな地理チャートを描画する方法 はじめに: データ視覚化において、地理チャートは、データ セットの空間分布パターンと傾向をより深く理解するのに役立つ一般的で強力なツールです。 Python は汎用プログラミング言語として、強力なデータ処理および視覚化機能を備えており、動的でインタラクティブな地理図の描画にも使用できます。この記事では、Python を使用して動的でインタラクティブな地理グラフを描画する方法を紹介し、具体的なコード例を示します。 1. Pythonを使用するための準備
