Canvas を使用して 360 度の閲覧を実現する_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Canvas を使用して 360 度の閲覧を実現する_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

はじめに: 私はここ数か月間新しい会社に来て、主にモバイル開発に従事しています。時々とても忙しくて疲れているので、しばらくブログを書いていません。実はここ数ヶ月でcanvas、createjs、egretについてある程度の理解と使いこなしができたので、まとめたいことがたくさんあります。今日の広州の雪の日を利用して、簡単なデモから始めましょう。 HTML5ゲームの方向性をとっているので、最近は小さなゲームを作っています。 Canvas と createjs については今後シリーズで書いていきます。やはり国内の情報は比較的少ないです。 Canvas に夢中になってからは、DOM がだんだん嫌いになりました。

360 度のブラウジング効果

最も単純な複数の画像を使用して、製品が 360 度回転するブラウジング効果を実現できるようにします。以前は、DOM を使用して写真や背景を変更するのは非常に便利で簡単でしたが、モバイル端末、特に Android システムでは、スムーズさが非常に心配になります。また、現在モバイル端末は基本的に Canvas context 2d をサポートしているので、canvas で実装できる場合は DOM の使用を避けるようにしましょう。もちろん、少数のアニメーションや単純なアニメーションの場合は、CSS3 を使用した方が良いでしょう。現在の対話型操作カテゴリはキャンバスです。

準備作業:

最初に、製品の周りの写真を数枚撮り、次にデザイナーに写真のレタッチを依頼し、最終的に複数の写真素材に分割します。状況に応じて、30 人から 40 人までの場合もあれば、12 人程度の小規模な場合もあります。将来的には、数枚の写真だけを必要とする 3D パノラマブラウジングエフェクトを作成する予定です。

図に示すように (たくさんありますね、笑、単純なメソッドを実装するには何かを犠牲にする必要があります。次回は別のメソッドを書きます):

HTML+CSS:

 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="/static/imghwm/default1.png"  data-src="img/loading.gif"  class="lazy"/ alt="Canvas を使用して 360 度の閲覧を実現する_html/css_WEB-ITnose" >45         </div>46         <canvas id="canvas" width="750"    style="max-width:90%">你的浏览器太老啦，换浏览器啦！</canvas>47         <script src="js/zepto.min.js"></script>48     </body>49 </html>

JavaScript:

 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 のモバイルモードを使用して開いてください。

声明

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

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。