Windows Summit 2010 4/6/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.

Slides:



Advertisements
Similar presentations
マイクロソフトがホスティングする拡張性に優れたサービス ベース アプリケーション プラットフォーム.
Advertisements

この部分こそが必 要とされている ! Runtime 自身と Expression が カバーする!
Windows Azure ハンズオン トレーニング Windows Azure Web サイト入門.
Oscar Koenders Principal Group Program Manager Microsoft Corporation
第28回codeseek勉強会 WPF で簡単ビデオ再生 2008年5月27日(火)
第27回codeseek勉強会 ZAM3D で簡単3D XAML プログラミング
D2-301 現時点の本資料は 完成版のスライドではありません。
MSON-B2 .NET Framework Web アプリケーション開発
Microsoft Consumer Channels and Central Marketing Group
Windows Summit /1/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Windows Summit /1/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Windows Summit /1/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
C# Programming .NET / C# Group 検索ワードでみる C#の困り事とその対策
3/2/2017 9:01 AM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Windows Phone アプリケーションでの データ視覚化
3/3/2017 8:49 AM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
3/4/ :37 PM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Expression Blend 3で始めるSilverlight 3アプリケーション開発
ParadoxのLiveScripting事情
Windows Summit /3/9 こんにちは。Microsoft Windows Summit 2010 へようこそ。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows.
Using connected devices in Metro style apps Metro スタイル アプリで デバイスを使用する
3/11/2017 7:02 PM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
WindowsストアアプリをC++/CXで作る
Windows Summit /13/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Microsoft Consumer Channels and Central Marketing Group
3/17/2017 1:49 AM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
データはお客様に属し、かつ、コントロール可能
Windows Summit /20/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
HP ProLiant DL980 G7 SQL Server 2008 R2 NUMA 環境 ベンチマークテスト結果報告書
ビジネスにおける オープンソースの利用価値
XAML の勉強不要! WPF アプリケーションは作れます
大学におけるクラウド活用の 最新動向と先進ソリューションの 事例
3/21/2017 3:39 AM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Using tiles and notifications タイルと通知の使用
[コース: A1] .NET Framework の基礎
Windows Summit /6/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Windows Summit /8/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Windows Summit /9/2017 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Microsoft Consumer Channels and Central Marketing Group
Windows Summit /9/21 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Windows Summit /11/7 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Microsoft Partner Network Office 365 社内使用ライセンスの有効化
Windows Summit /11/7 こんにちは。Windows Summit へようこそ。
Azure Pack そして災害対策 日本マイクロソフト株式会社 エバンジェリスト 高添 修
11/9/2018 3:35 AM Windows Azure Platform ハンズオン トレーニング Windows Azure アプリケーション開発概要 ~ Windows Azure 入門編 ~ © 2007 Microsoft Corporation. All rights reserved.
Windows Summit /22/2018 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may.
Windows Summit /11/23 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may.
Windows Summit /24/2018 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may.
Expression Blend 3で始めるSilverlight 3アプリケーション開発
Chad Siefert Senior Test Lead Microsoft Corporation
Windows Azure 通知ハブ.
12/9/ :14 AM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Windows Summit /31/2018 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may.
suppose to be expected to be should be
Microsoft Visual Studio 2005 Tools for
Windows Summit /21/2019 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Windows Summit /22/2019 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
MIX 09 2/23/2019 1:22 PM © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Max Morris Principal Program Manager Microsoft Corporation
Windows Summit /24/2019 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
主要関係者の特定用テンプレート Windows 10 and Office 365 導入ステップ 2/24/2019
Yochay Kiriaty Senior Technical Evangelist Microsoft® Corporation
~ 第5回 認証のためのプロキシー Web Application Proxy
Windows Summit /4/10 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
Craig Rowland Senior Program Manager Microsoft Corporation
Microsoft Consumer Channels and Central Marketing Group
Windows Summit 2010 © 2010 Microsoft Corporation.All rights reserved.Microsoft、Windows、Windows Vista およびその他の製品名は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。
Windows Summit /22/2019 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.
MIX 09 8/2/2019 8:06 AM © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Windows Azure メディアサービス
Presentation transcript:

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.