はじめに: 私はここ数か月間新しい会社に来て、主にモバイル開発に従事しています。時々とても忙しくて疲れているので、しばらくブログを書いていません。実はここ数ヶ月でcanvas、createjs、egretについてある程度の理解と使いこなしができたので、まとめたいことがたくさんあります。今日の広州の雪の日を利用して、簡単なデモから始めましょう。 HTML5ゲームの方向性をとっているので、最近は小さなゲームを作っています。 Canvas と createjs については今後シリーズで書いていきます。やはり国内の情報は比較的少ないです。 Canvas に夢中になってからは、DOM がだんだん嫌いになりました。
最も単純な複数の画像を使用して、製品が 360 度回転するブラウジング効果を実現できるようにします。以前は、DOM を使用して写真や背景を変更するのは非常に便利で簡単でしたが、モバイル端末、特に Android システムでは、スムーズさが非常に心配になります。また、現在モバイル端末は基本的に Canvas context 2d をサポートしているので、canvas で実装できる場合は DOM の使用を避けるようにしましょう。もちろん、少数のアニメーションや単純なアニメーションの場合は、CSS3 を使用した方が良いでしょう。現在の対話型操作カテゴリはキャンバスです。
最初に、製品の周りの写真を数枚撮り、次にデザイナーに写真のレタッチを依頼し、最終的に複数の写真素材に分割します。状況に応じて、30 人から 40 人までの場合もあれば、12 人程度の小規模な場合もあります。将来的には、数枚の写真だけを必要とする 3D パノラマ ブラウジング エフェクトを作成する予定です。
図に示すように (たくさんありますね、笑、単純なメソッドを実装するには何かを犠牲にする必要があります。次回は別のメソッドを書きます):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> 6 <title>360度旋转浏览</title> 7 <style type="text/css"> 8 *{ 9 margin: 0;10 padding: 0;11 }12 body,html{13 width: 100%;14 height: 100%;15 overflow: hidden;16 }17 .loading{18 position: absolute;19 width: 100%;20 height: 100%;21 left: 0;22 top: 0;23 background-color: #888888;24 z-index: 10;25 }26 .loading img{27 position: relative;28 width: 32px;29 height: 32px;30 left: 50%;31 top: 50%;32 margin-left: -16px;33 margin-top: -16px;34 }35 canvas{36 width: 100%;37 height: 100%;38 z-index: 100;39 }40 </style>41 </head>42 <body>43 <div class="loading">44 <img src="img/loading.gif"/>45 </div>46 <canvas id="canvas" width="750" height="1254">你的浏览器太老啦，换浏览器啦！</canvas>47 <script src="js/zepto.min.js"></script>48 </body>49 </html> 1 var canvas = document.getElementById("canvas"), 2 DPR = window.devicePixelRatio,//获取设备的物理像素比 3 viewW = window.innerWidth, 4 viewH = window.innerHeight, 5 cansW = viewW*DPR,//放大canvas 6 cansH = viewH*DPR, 7 ctx = canvas.getContext("2d"), 8 imgArr = [],//图片数组 9 curDeg = 1,//代表当前显示的图片下标10 imgTotal = 51,//图片总数11 imgRatio = (447/1000), //图片高宽比12 imgW = viewW*1.5,//图宽13 imgH = imgW*imgRatio;//图高14 15 //重设canvas宽高16 //显示的宽高17 canvas.style.width = cansW + "px";18 canvas.style.height = cansH + "px";19 //画布宽高20 canvas.width = cansW;21 canvas.height = cansH;22 //loading23 $(function(){24 var baseURL = "img/",25 imgURL ="",26 imgObj = null,27 imgIndex = 1;28 //loading29 for(var i = 1;i <= imgTotal;i++){30 imgURL = baseURL + i + ".png";31 imgObj = new Image();32 imgObj.src = imgURL;33 //将所有图片对象压入一个数组,方便调用34 imgArr.push(imgObj);35 imgObj.onload = function(){36 imgIndex ++;37 if(imgIndex > 51){38 $(".loading").hide();39 //默认图40 drawImg(0);41 }42 }43 }44 //手指触摸起点45 var startPoint = 0,46 //滑动多长距离，这里取（canvas宽/图片总数的一半）47 //数值越大约灵敏48 distance = cansW/30;49 //开始50 $("#canvas").on({51 "touchstart":function(e){52 //记录起始触摸点53 startPoint = e.touches[0].clientX;54 //去掉默认事件，iPhone下可去除双击页面默认跳动(翻页)效果55 e.preventDefault();56 },57 "touchmove":function(e){58 var tempPoint = e.touches[0].clientX;59 //向右移动60 if((tempPoint - startPoint) > distance){61 drawImg(curDeg,"right");62 //符合距离条件移动后，将记录点设到手指最新位置63 startPoint = tempPoint;64 }else if((tempPoint - startPoint) < -distance){//左65 drawImg(curDeg,"left");66 startPoint = tempPoint;67 }68 //禁止移动页面69 e.preventDefault();70 }71 });72 });73 //绘图74 //参数：图片对象下标，移动方向75 function drawImg(n,type){76 if(type == "left"){77 if(curDeg > 0){78 curDeg--;79 }else{80 curDeg = 50;81 } 82 }else if(type == "right"){83 if(curDeg < 50){84 curDeg++;85 }else{86 curDeg = 0;87 }88 }89 ctx.clearRect(0,0,cansW,cansH); 90 //参数：图片对象，X偏移量，Y偏移量，图宽，图高91 ctx.drawImage(imgArr[n],-(imgW-viewW)*0.5,(viewH-imgH)*0.5,imgW,imgH);92 }Canvas に関して、モバイル端末で Canvas を使用する場合、DPR の正式名称は DevicePixelRatio (デバイス ピクセル比) であることを忘れずに説明しておきます。これは、デバイス上の物理ピクセルとデバイスに依存しないピクセル (ディップ) の比率を意味します。つまり、デバイスに依存しないピクセル (CSS では 1px として理解できます) が物理ピクセルの数に相当します。 DPR=2 の場合、CSS の 1px はデバイスの物理ピクセルの 2px に相当します。ただし、キャンバス描画ではキャンバスのサイズと表示領域のサイズが異なります。視覚領域のサイズは DPR サイズに応じて調整されますが、キャンバス サイズは調整されません。たとえば、DPR=2 の場合、Retina スクリーン上のキャンバスの視覚的な幅と高さをキャンバスの幅と高さに等しくなるように設定すると、キャンバス内の 1 ピクセルが Retina スクリーン上では 2 ピクセルとして表示されます。ブレの原因となります。
DPR とビューに関する参考記事: モバイル フロントエンド開発におけるビューポートの詳細な理解
したがって、ぼやけの問題を解決するには、キャンバス サイズが物理ピクセル サイズと同じです。つまり、キャンバスの幅と高さを対応する物理ピクセル サイズに変更し、画面上で本当に表示する必要がある領域を描画し、残りの領域を非表示にします。図に示すように:
さらに、DPR は window.devicePixelRatio を通じて取得できます。Webkit に基づくすべてのブラウザーはそれをサポートしていますが、IE はサポートしていません。
さらに、ここでのスライドにはネイティブメソッドのtouchstartとtouchmoveのタッチイベントを使用し、指の始点と終点のX軸座標を記録することで左右のスライドを判定しました。 zeptoのTOUCHコンポーネントを追加すると、swipeLeftとswipeRightを直接使用してトリガー（ドラッグを使用してドラッグ）して、対応する画像を変更することができます。
描画するには、drawImage() メソッドを使用します。描画する前に、画像が完全にロードされるまで待つ必要があることにも注意してください。そうしないと、エラーが報告されます。
360 度閲覧サンプル
モバイルデバイスまたは Google Chrome のモバイルモードを使用して開いてください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
