Backend.com HTML5 ビデオ チュートリアル

「Backend.com HTML5 ビデオ チュートリアル」は、現在も将来も重要なテクノロジーです。HTML5 をよく学ぶと、さまざまなサイズのデバイスに適応できる Web フロントエンド インターフェイスを開発できるだけでなく、Web ページをデザインすることもできます。 HTML5 テクノロジーを使用して Hybird アプリ (Android/iOS/Windows Phone およびその他のデバイス用のアプリケーションのハイブリッド開発) を開発したり、HTML5 テクノロジーを使用してデスクトップ プログラムを開発したりすることができます (Node Webkit プロジェクトを参照、Github を使用してください)。

コース再生アドレス: http://www.php.cn/course/469.html

先生の教え方:

先生の講義はシンプルかつ奥深く、構造が明確です、相互に接続された厳密な議論、厳密な構造を層ごとに分析し、論理的思考力を使用して生徒の注意を引き、理性を使用して教室での指導プロセスを制御します。教師の講義を聞くことで、生徒は知識を学ぶだけでなく思考力のトレーニングも受け、教師の厳しい学問的姿勢に影響を受け、影響を受けます

このビデオの最も難しい点は、HTML5 Canvas:

1です。 Canvas とは

canvas は、描画効果を表示するために HTML5 によって提供されるタグです。

canvas は、特定の JavaScript API を使用してグラフィック (Canvas 2D または WebGL) を描画できる空白のグラフィック領域を提供します。 OS X ダッシュボードおよび Safari ブラウザーの場合


1.1 キャンバスに関するいくつかの注意事項

キャンバスとは、JavaScript でペイントできるキャンバスの長方形の領域です。そのすべてのピクセルを制御します。

canvasタグはJavaScriptを使用してWebページ上に画像を描画するものであり、それ自体に描画機能はありません。

キャンバスには、パス、長方形、円、文字を描画したり、画像を追加したりするための複数の方法があります。

キャンバス標準:

最新の標準

安定版標準

現在、標準はまだ改良中です。まず、初期の API を使用するだけですべてのアプリケーションを完了できます

1.2 Canvas の主なアプリケーション領域 (理解)

1. ゲーム: Canvas は、Web ベースの画像表示という点で Flash よりも 3 次元で洗練されています。 Canvas ゲームはさらにスムーズになり、クロスファンクショナルになりました。プラットフォームはさらに優れています。

2. 視覚化されたデータ (データ チャートの場合): Baidu の echart、d3.js、three.js

3. バナー広告: Flash がかつて輝かしかったとき、スマートフォンはまだ登場していませんでした。現在および将来のスマートフォン時代において、HTML5 テクノロジーはバナー広告で大きな役割を果たす可能性があり、動的な広告効果を実現するために Canvas を使用するのは最適です。

4. 将来の

シミュレータ: 視覚効果やコア機能の点に関わらず、シミュレータ製品は完全に JavaScript で実装できます。

リモート コンピューター コントロール: Canvas を使用すると、開発者は Web ベースのデータ送信をより適切に実装し、完璧な視覚的なコントロール インターフェイスを構築できます。

グラフィック エディター: Photoshop グラフィック エディターは 100% Web ベースになります。

1.3 コースの目標

基本的なキャンバス API の使い方を学びます

データの視覚化を実現します

2. Canvas タグの概要

<canvas width="600" height="400"></canvas>

機能: 描画の内容を表示します

2.1 Canvas の互換性

<canvas width="600" height="400">

Canvas タグをサポートしているのは IE9 以降のブラウザのみです

ヒント: お使いのブラウザは Canvas をサポートしていません。ブラウザをアップグレードしてください

2.2 幅と高さの設定に関する注意事項

1 HTML 属性/DOM 属性の幅と高さを設定してください

2 禁止: CSS スタイルを使用して幅と高さを設定してください

属性を使用して幅と高さを設定することは、実際にはキャンバスのピクセルを増やすことと同じです

デフォルト幅と高さ: 300*150 は、水平方向に 300 ピクセル、垂直方向に 150 ピクセルを意味します。属性を使用して幅と高さを設定すると、CSS スタイルを使用してもピクセルは増加しません。ピクセルが変化するだけです。すべてのピクセルが拡大されます。

2.3 描画

JavaScriptで提供される描画APIを使用して描画します

各キャンバスには一連の描画API（ツール）があります

2.3.1 描画の基本手順

1 キャンバスを見つける

2 キャンバスを通して描画コンテキスト (一連の API コレクション) を取得します

3 API を使用して必要なグラフィックを描画します

// 1 找到canvas
var cv = document.getElementById("canvasId");
// 2 拿到canvas绘图上下文
var ctx = cv.getContext("2d");
// 3 使用上下文中的API绘制图形
ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
ctx.stroke();           // 描边

注:

getContext("2d")、パラメーター `2d` は、フラット グラフィックを描画するためのコンテキストの取得を指します;

3 次元グラフィックスを描画したい場合は、パラメーターを渡す必要があります: "webgl"

2d コンテキスト タイプ: CanvasRenderingContext2D

WebGL コンテキストを取得: (理解)

var cCv = document.createElement("canvas");
        console.log(cCv.getContext("webgl"));

以上がBackend.com HTML5 ビデオ チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。