コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML5 Canvas 入門 (1) - 基本概念

HTML5 Canvas 入門 (1) - 基本概念

黄舟
リリース： 2016-12-20 14:46:32
オリジナル
1046 人が閲覧しました

Canvas とは

は、HTML5 で定義された新しい HTML 要素です。この要素は通常、JavaScript を介して HTML ページにグラフィックを描画したり、画像を合成したりするために使用できます。また、一部のアニメーションを実行するためにも使用できます。もちろん、HTML5 仕様はまだドラフト段階にあり、正式リリースは 2010 年まで待たなければならない可能性がありますが、多くのブラウザーはすでに HTML5 仕様の一部をサポートしています。現在、canvas 要素をサポートしているブラウザには、Firefox 3 以降、Safari 4、Chrome 2.0 以降などがあります。そのため、このページの例を実行するときは、上記のブラウザのいずれかを使用していることを確認してください。

Mozilla には Canvas に関するチュートリアルがすでにたくさんありますが、私の学習プロセスを記録することにしました。私の書いた内容が十分に明確ではないと思われる場合は、Mozilla Web サイトの参考文献にある Canvas チュートリアルへのリンクを参照してください。

また、いくつかの興味深い Canvas の例がここにあります。

Canvas の使用を開始する

Canvas の使用は、他の HTML 要素と同様に、ページに タグを追加するだけです。


<canvas id="screen" width="400" height="400"></canvas>
ログイン後にコピー

もちろん、これは Canvas オブジェクトを作成するだけです。この時点では、canvas 要素は div 要素と何の違いもなく、ページ上には何も表示されません:)

さらに、canvas 要素のサイズは width と を通じて指定できます。 height 属性は img 要素に似ています。
Canvas の中核: Context
前述したように、Canvas オブジェクトは JavaScript を通じて操作して、グラフィックの描画や画像の合成などを行うことができます。これらの操作は Canvas オブジェクト自体を通じて実行されるのではなく、Canvas オブジェクトの getContext メソッドを通じて Canvas を取得します。 Canvas オブジェクトの操作コンテキスト。つまり、後で Canvas オブジェクトを使用するときに、Canvas オブジェクトの Context を扱うことになり、Canvas オブジェクト自体を使用して Canvas オブジェクトのサイズなどの情報を取得することができます。
Canvas オブジェクトの Context を取得するのは非常に簡単です。呼び出すときに、現在使用できる唯一の Type 値は 2d: 

<canvas id="screen" width="400" height="400"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("screen"); 
var ctx = canvas.getContext("2d"); 
</script>
ログイン後にコピー

Firefox です。 3.0.x の恥ずかしさ

Firefox 3.0.x は Canvas 要素をサポートしていますが、仕様に完全に準拠して実装されていないため、Firefox 3.0.x では、仕様の fillText メソッドとMeasureText メソッドがいくつかの Firefox 固有のメソッドに置き換えられています。したがって、Firefox 3.0.x で Canvas を使用する場合は、まず、さまざまなブラウザでのこれらのメソッドの違いを修正する必要があります。

次のコードは Mozilla Bespin プロジェクトから抜粋したもので、Firefox 3.0 の Canvas Context オブジェクトとその関連メソッドおよびプロパティ間の不一致を修正します。

Hello, Canvas!

Canvas について予備的な理解をした後、有名な HelloWorld "Hello, Canvas" の別のブランチである最初の Canvas プログラムの作成を開始しました: 

function fixContext(ctx) { 
// * upgrade Firefox 3.0.x text rendering to HTML 5 standard 
if (!ctx.fillText && ctx.mozDrawText) { 
ctx.fillText = function(textToDraw, x, y, maxWidth) { 
ctx.translate(x, y); 
ctx.mozTextStyle = ctx.font; 
ctx.mozDrawText(textToDraw); 
ctx.translate(-x, -y); 
}; 
} 
// * Setup measureText 
if (!ctx.measureText && ctx.mozMeasureText) { 
ctx.measureText = function(text) { 
if (ctx.font) ctx.mozTextStyle = ctx.font; 
var width = ctx.mozMeasureText(text); 
return { width: width }; 
}; 
} 
// * Setup html5MeasureText 
if (ctx.measureText && !ctx.html5MeasureText) { 
ctx.html5MeasureText = ctx.measureText; 
ctx.measureText = function(text) { 
var textMetrics = ctx.html5MeasureText(text); 
// fake it &#39;til you make it 
textMetrics.ascent = ctx.html5MeasureText("m").width; 
return textMetrics; 
}; 
} 
// * for other browsers, no-op away 
if (!ctx.fillText) { 
ctx.fillText = function() {}; 
} 
if (!ctx.measureText) { 
ctx.measureText = function() { return 10; }; 
} 
return ctx; 
}
ログイン後にコピー

サンプルの Canvas オブジェクトを実行します。領域には「Hello , World!"、これはコード内の ctx.fillText("Hello, World!", 20, 20); とまったく同じです。

fillText と関連プロパティ

fillText メソッドは、Canvas にテキストを表示するために使用されます。最後のパラメータはオプションです:

void fillText(in DOMString text, in float x, in float y, [ Optional] in float maxWidth);

ここで、maxWidth はテキストを表示するときの最大幅を表し、テキストのオーバーフローを防ぐことができます。ただし、Firefox と Chomre で maxWidth を指定しても効果がないことがテストでわかりました。

fillTextメソッドを使用する前に、Contextのfont属性を設定することで表示されるテキストのフォントを調整できます。上記の例では、表示されるテキストのフォントとして「20pt Arial」を使用しました。別の値を設定することもできます。フォントの具体的な効果を確認してください。

上記は HTML5 Canvas 入門 (1) - 基本概念の内容です。さらに関連するコンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。

関連ラベル：
canvas html5 基本的な考え方
ソース：php.cn
前の記事：HTML を段階的に学習します---レッスン 4 次の記事：HTML5 Canvas 入門 (2) - パス
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート