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

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 '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 サイト (www.php.cn) に注目してください。