Windows Summit 2010 4/6/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Getting Started with Canvas (Canvas 入門) Leon Braginski Senior Program Manager Microsoft Corporation
目的 HTML 5 の canvas 要素を理解する
議題 Canvas の概要 基本的な使用 図形の描画 イメージとビデオの描画 変換の使用 アニメーションの作成
Canvas 要素の紹介
Canvas の概要 即時モードの 描画サーフェイス 即時モードの 描画サーフェイス 図形、グラデーション、 イメージ、パス、他の オブジェクトを描画す るために canvas コン テキスト API を使用 JavaScript と組み合わ せてアニメーションを 作成可能
Canvas と SVG 機能 Canvas SVG 描画モード Immediate (即時) 型 (注 1) Retained (保持) 型 (注 2) DOM サポート DOM の <CANVAS> 部分 SVG 要素のそれぞれが DOM の一部 アニメーション Canvas 内で直接スクリプトを使用 DOM でオブジェクトを 操作 GPU アクセラレーション 適用 どんな場合に使用するか プログラムによるレンダリング、ゲーム 精度の高い図、グラフ 注 1: 描画オブジェクトを直接描画するモード。描画後はオブジェクトの認識が不可。 注 2: 描画オブジェクトを保持しながら描画するモード。描画後もオブジェクトの認識が可能。
Canvas の 3 つの簡単な手順 <html> <body> <canvas id="myCanvas" width="500" height="500"> Canvas is not supported. </canvas> </body> </html> <script language=javascript> … myCanvas = document.getElementById ("myCanvas"); if (myCanvas.getContext) { ctx= myCanvas.getContext("2d"); ctx.arc (50, 50, 30, 0, Math.PI *2, true); ctx.fillStyle = "rgba(0, 162, 232, .5)"; ctx.fill (); </script>
Canvas プリミティブ 座標系 長方形の図形 線 弧 - 円の描画に使用 可能 曲線 パス - プリミティブ の組み合わせ Y 幅 高さ Y 幅 y X x 高さ
Canvas プリミティブ (続き) グラデーション 影 フォント その他いろいろ!
Canvas 変換 拡大縮小、回転、移動、またはカスタム変換 の適用が可能 Canvas 変換は GPU にオフロードされる
デモ Canvas の基本
Canvas とビデオの組み合わせ Canvas は簡単にビデオ タグと組み合わせ可能 Canvas はビデオ要素上にオーバーレイ可能
Canvas とビデオの組み合わせ <video id="myVideo" src="fish.mp4" height="480" width="640"autoplay controls loop> </video> <canvas id="myCanvas" height="480" width="640" style="left: 0px; top: 0px; position: absolute;" > </canvas> <script language=javascript> myCanvas = document.getElementById("myCanvas"); if (myCanvas.getContext) { ctx = myCanvas.getContext("2d"); ctx.font = '35px "Segoe UI" bold'; } setInterval(draw, 16); function draw () { y1 += distance; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillText (customText, 60, y1); </script>
Canvas コンテキストでのビデオの使用 <video id="myVideo" src="fish.mp4" loop style="display: none"> <canvas id="myCanvas" height="480" width="640" style="left: 0px; top: 0px; position: absolute;" > </canvas> <script language=javascript> myCanvas = document.getElementById("myCanvas"); myVideo = document.getElementById("myVideo"); myVideo.play(); myTimer = setInterval(drawVideo, 16); … function drawVideo() { ctx.drawImage (myVideo, 0, 0, 480, 640); } </script>
Canvas コンテキストでビデオを使用する利点 Windows Summit 2010 4/6/2017 Canvas コンテキストでビデオを使用する利点 Canvasで使用できる変換を適用可能 ピクセルを直接操作する機能 (Internet Explorer 9 Beta では未最適化) 例: 各フレームから独自カラーを分離 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
ビデオおよびオーバーレイされた canvas、canvas コンテキストでのビデオ Windows Summit 2010 4/6/2017 デモ ビデオおよびオーバーレイされた canvas、canvas コンテキストでのビデオ © 2010 Microsoft Corporation.All rights reserved.Microsoft、Windows、Windows Vista およびその他の製品名は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。 このプレゼンテーション スライドに記載された内容は情報の提供のみを目的としており、このプレゼンテーション スライドの作成日におけるマイクロソフトの見解を示すものです。マイクロソフトは市場の変化に対応する必要があるため、このプレゼンテーション スライドの内容に関する責任をマイクロソフトは問われないものとします。また、このプレゼンテーションの日付以降に発表される情報の正確性を保証できません。 明示、黙示または法律の規定にかかわらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。
Canvas とイメージの組み合わせ Canvas とイメージを組み合わせると、多彩なグラフィック スを盛り込んだ Web サイトに
アニメーションでの Canvas の使用 イメージ Canvas + アニメーション 変換 美しい対話型サイト
イメージを使用した Canvas のアニメーション化 基本的なアニメーション の手順: Canvas 上にイメージをレンダリングする Canvas をクリアする 繰り返す
Canvas のアニメーション 2 種類のアニメーション フレーム ベース 時間ベース
フレーム ベースのアニメーション オブジェクトはフレームの更新ごとに同じピク セル数だけ移動 マシン依存 実装が単純 マシンが高速であればアニメーションも高速 マシンが低速であればアニメーションも低速 実装が単純
フレーム ベースのアニメーション var distance=5, lastFrameTime = 0; Windows Summit 2010 4/6/2017 フレーム ベースのアニメーション var distance=5, lastFrameTime = 0; setInterval(drawTimeBased, 16); function drawFrameBased() { y1 += distance; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.drawImage(img, x1, y1, imgWidth, imgHeight); } © 2010 Microsoft Corporation.All rights reserved.Microsoft、Windows、Windows Vista およびその他の製品名は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。 このプレゼンテーション スライドに記載された内容は情報の提供のみを目的としており、このプレゼンテーション スライドの作成日におけるマイクロソフトの見解を示すものです。マイクロソフトは市場の変化に対応する必要があるため、このプレゼンテーション スライドの内容に関する責任をマイクロソフトは問われないものとします。また、このプレゼンテーションの日付以降に発表される情報の正確性を保証できません。 明示、黙示または法律の規定にかかわらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。
時間ベースのアニメーション オブジェクトは単位時間ごとに同じピクセル数 だけ移動 マシン非依存 マシンが高速であればアニメーションはスムーズ マシンが低速であればアニメーションの動きがぎく しゃく ゲームで使用する場合は、一定時間内にアニ メーションを完了すること
時間ベースのアニメーション var speed = 250, lastFrameTime = 0; Windows Summit 2010 4/6/2017 時間ベースのアニメーション var speed = 250, lastFrameTime = 0; setInterval(drawTimeBased, 16); function drawTimeBased() { // 最後のフレーム以降の時間 var now = new Date().getTime(); dt = (now - lastFrameTime) / 1000; lastFrameTime = now; y2 += speed * dt; ctx.clearRect(x2, 0, ctx.canvas.width, ctx.canvas.height); ctx.drawImage(img, x2, y2, imgWidth, imgHeight); } © 2010 Microsoft Corporation.All rights reserved.Microsoft、Windows、Windows Vista およびその他の製品名は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。 このプレゼンテーション スライドに記載された内容は情報の提供のみを目的としており、このプレゼンテーション スライドの作成日におけるマイクロソフトの見解を示すものです。マイクロソフトは市場の変化に対応する必要があるため、このプレゼンテーション スライドの内容に関する責任をマイクロソフトは問われないものとします。また、このプレゼンテーションの日付以降に発表される情報の正確性を保証できません。 明示、黙示または法律の規定にかかわらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。
ベスト プラクティス: イメージ セルの描画 sY sX fishH fishW
単一のイメージ セルの描画 <img id="imageStrip" src="fishstrip.png" style="display: none" tabIndex="-1"> // イメージ ストリップの取得 imageStrip = document.getElementById('imageStrip'); ctx.drawImage ( // ソース イメージ情報 FishImageStrip, // ソース fishW * cell, // 魚のセルの sX fishH * species, // 魚のセルの sY fishW, // セルの幅 fishH, // セルの高さ // Canvas のコピー先 x, // 魚を描画する場所の X y, // 魚を描画する場所の Y (canvas 上) fishW, // コピー先の幅 fishH, // コピー先の高さ );
スプライトからの アニメーション セルの レンダリング デモ スプライトからの アニメーション セルの レンダリング
さらに魅力的にする : さまざまなイメージを使った canvas 背景を読み込む イメージ スプライト全体を読み込む Canvas を変換する (拡大縮小、移動) ストリップからの特定のセルをレンダリングする 3 から 4 までの手順を繰り返す
イメージを使用した canvas のアニメーション化 var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext("2d"); … ctx.save(); ctx.translate(x, y); ctx.scale(scale, scale); ctx.transform(flip, 0, 0, 1, 0, 0); ctx.drawImage(imageStrip, fishW * cell, fishH * species, fishW, fishH, -fishW / 2, -fishH / 2, fishW, fishH); ... ctx.restore();
デモ Fish Tank (水槽) を 完成させる例
皆様へのお願い HTML5 canvas 要素を使用して、多彩なグラ フィックスを盛り込んだ Web サイトを構築して ください。 Internet Explorer 9 の Beta 版では、canvas のピ クセルを直接操作しないでください。 このセッションの発表について、 評価フォームへの記入をお願いいたします。
リソース HTML5 Canvas 2D Context http://dev.w3.org/html5/2dcontext/ Canvas ブログ http://blogs.msdn.com/b/ie/archive/2010/07/01/ie9- includes-hardware-accelerated-canvas.aspx Windows Summit 2010 の関連セッション: Internet Explorer 9 Overview (Internet Explorer 9 の概要) Internet Explorer 9 Overview (Update) (Internet Explorer 9 の概要 – 更 新) Easier Web Development Using Internet Explorer 9 Developer Tools (Internet Explorer 9 開発者ツールを使用したより簡単な Web 開発) Internet Explorer 9 Desktop Integration Using Pinning (Internet Explorer 9 のピン固定表示によるデスクトップ統合) Best Practices for Advanced Graphics in Internet Explorer 9 (Internet Explorer 9 で高度なグラフィックを作成するベスト プラクティス) Getting Started with SVG (SVG 入門) Touch Investments in Internet Explorer 9 (Internet Explorer 9 のタッチ 機能に対する取り組み)
Windows Summit 2010 4/6/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.