数日前、私は github404 の同様のインターフェースに敬意を表して css スタイルと js を使用しましたが、同時に、最近、canvas にも触れてみました。以前の js アルゴリズムを使用しました。 Canvas を使用して、github404 の動的な効果を完成させます。
レンダリング
ファイルディレクトリファイルリソースファイルのソースコードと写真は記事の最後に記載されています
コードWebページの本文部分
ここでは、キャンバスの幅と高さを定義し、ブロックレベルの要素として設定します。これらの img タグはこれらの画像をロードするため、js でロードしてから、display:none を表示しないように画像を設定する必要はありません。
<body> <canvas id=mycanvas width=1680 height=630 style=margin:0;display:block> お使いのブラウザはキャンバスをサポートしていません </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>js部分
1. ここでは、すべてのパラメータとメソッドをカプセル化するために、github404 という名前の新しい json オブジェクトを作成しました。
2. imgData オブジェクトを再度作成し、img に必要なすべてのパラメータを ps:top に渡し、drawImage() メソッドでの位置決めに使用します。scale パラメータは、マウスが動いたときの対応する画像の動きを計算するために使用されます。
3. init() メソッドは初期化に使用され、外部とのインターフェイスです。
4. 描画メソッドの実装は、for in ループを使用して imgData[] を走査し、値を順番に割り当て、最後にdrawImage() メソッドを使用して描画します。ただし、モバイル描画メソッドでは、最初に ctx.clearRect() メソッドを使用してキャンバスをクリアすることに注意する必要があります。
<script> var github404 = { imgData: {//すべての画像の情報を json オブジェクトとして記録します bg: { top: 0, left: 110,// 上と左は位置決めに使用されます。src: './images/ を使用しますfield.png',//対応する画像パス スケール: 0.06,//マウスが移動すると、対応する画像の動きの割合},building_2: { top: 133, left: 1182、ソース: './images/building_2.png'、スケール: 0.05、}、building_1: { 上: 79、左: 884、ソース: './images/building_1.png'、スケール: 0.03、}、speeder_shadow : { 上: 261、左: 776、ソース: './images/speeder_shadow.png'、スケール: 0.01, }、cat_shadow: { 上: 288、左: 667、ソース: './images/cat_shadow.png'、スケール: 0.02, }、スピーダー: { トップ: 146、左: 777、ソース: './images/speeder.png'、スケール: 0.01、 }, cat: { 上: 88, 左: 656, src: './images/cat.png', スケール: 0.05, }, text: { 上: 70, 左: 364, src: './images/text ' .png'、スケール: 0.03、}、}、rate_w: 0、rate_h: 0、//オフセット比率 field_width: 1680, field_height: 370,//背景の高さと幅 Canvas: document.querySelector('#mycanvas'),//キャンバス要素を取得します init: function() {//読み込みメソッド this.setRateWH(); を初期化します。 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');// ブラシを取得します(key in this.imgData){//imageData オブジェクトを走査します var image = new Image(); var left = this.imgData[key].left; [ 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); this.imgData) { var image = new Image(); var offer_w = this.rate_w * pageX * this.imgData[key].scale; var offer_h = this.rate_h * this.imgData[key].scale; /左と上を定義し、下に描画するときにパラメータを配置します。 var left = this.field_width/100 - offer_w + this.imgData[key].var top = this.field_height/100 - offer_h + this.imgData[key].top; ctx.drawImage(image,left,top, image.width,image.height); } } window.onload = function() { //github404 の init メソッドを呼び出してデータをカプセル化するだけ github404.init() } </script>要約する今回はキャンバスを使用してこのダイナミックな効果を完成させたので、キャンバスの使い方についてさらに理解できました。同時に私を作ってください
json オブジェクトを使用してデータとメソッドをカプセル化し、コードを編成する方法についてより深く理解しました。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。