HTML5 Canvas 入門 (1) - 基本概念_html5 チュートリアルスキル-H5 チュートリアル-php.cn

HTML5 Canvas 入門 (1) - 基本概念_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:51:37

オリジナル

1285 人が閲覧しました

キャンバスとは

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

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

Canvas を始めましょう

Canvas の使用は、他の HTML 要素と同様に、ページに

を追加するだけです。

コードをコピー

コードは次のとおりです:

もちろん、これは Canvas オブジェクトを作成するだけであり、それに対して操作は実行しません。この時点の Canvas time 要素は div 要素と何ら変わりません。ページには何も表示されません:)
さらに、canvas 要素のサイズは、img 要素に似た width 属性と height 属性で指定できます。。
Canvas の中核: コンテキスト
前述したように、Canvas オブジェクトは JavaScript を通じて操作して、グラフィックの描画や画像の合成などを行うことができます。これらの操作は Canvas オブジェクト自体を通じて実行されるのではなく、ただし、Canvas オブジェクトのメソッド getContext を通じて Canvas 操作コンテキストを取得することによって実行されます。つまり、後で Canvas オブジェクトを使用するときに、Canvas オブジェクトの Context を扱うことになり、Canvas オブジェクト自体を使用して Canvas オブジェクトのサイズなどの情報を取得することができます。
Canvas オブジェクトの Context を取得するのは非常に簡単です。呼び出し時に、現在利用可能な Context タイプの値は 2d のみです。

ヒント: を実行する前にコードの一部を変更できます。

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

提示：您可以先修改部分代码再运行

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas id="screen" width="400" height="400"></canvas> 
<script type="text/javascript"> 
(function() { 
var canvas = document.getElementById("screen"); 
var ctx = fixContext(canvas.getContext("2d")); 
ctx.font = "20pt Arial"; 
ctx.fillText("Hello, Canvas!", 20, 20); 
ctx.fillText("www.xujiwei.com", 20, 50); 
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; 
} 
})(); 
</script>

提示：您可以先修改部分代码再运行

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

fillText と関連属性

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

void fillText(DOMString テキスト内、float x 内、float y 内、[オプション] float maxWidth 内);

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

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

終了

今回はここまでです。仕様書を読みながらこのシリーズを書きます:)

参考資料

1. HTML5 Canvas、スクリプト言語の新しい段階、hred

2. キャンバス要素、WHATWG