html5キャンバスとは

Canvas は、描画効果を表示するために HTML5 で提供されるタグです。「」タグは、空白のグラフィック領域 (キャンバスの長方形の領域) を提供し、特定の JavaScript API を使用して表示する必要があります。グラフィックを描きます。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

1. Canvas とは

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

canvas は、特定の JavaScript API を使用してグラフィックを描画できる空のグラフィック領域を提供します ( Canvas 2D または WebGL)
Apple によって初めて導入され、OS X ダッシュボードと Safari ブラウザで使用されます

1.1 Canvas に関するいくつかの注意事項

Canvas は、キャンバスの長方形の領域であり、 JavaScriptを使用して描画されます。そのすべてのピクセルを制御します。

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

Canvas には、パス、四角形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

1.2 Canvas の主な応用分野 (理解)

1)、ゲーム: Canvas は Web ベースの画像表示という点で Flash よりも 3 次元的で洗練されており、キャンバス ゲーム流暢さとクロスプラットフォームの点でさらに優れています。

2) 可視化データ（データチャート）：Baidu の echart、d3.js、three.js

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

4) 将来

シミュレータ: 視覚効果やコア機能の点に関係なく、シミュレータ製品は JavaScript によって完全に実装できます。

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

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

2. Canvasタグの紹介

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

機能:描画内容を表示するが描画はできない

2.1 Canvasの互換性

<canvas width="600" height="400">
    IE9及其以上版本的浏览器，才支持canvas标签
    提示：您的浏览器不支持canvas，请升级浏览器
</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();           // 描边

推奨チュートリアル: "html ビデオ チュートリアル"

以上がhtml5キャンバスとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。