html5 Canvas-1.canvas の概要 (Hello Canvas)_html5 チュートリアルのスキル

本日より、html5キャンバスに関する一連の講座を開始いたします。このシリーズは、「HTML5 Canvas: Native Interactivity and Animation for the Web」を読んだ後の要約です。興味のある友人は、英語の原書をダウンロードして読むことができます。この本は Canvas ゲームの開発手法を紹介することで Canvas の強力な機能を紹介しており、この本を読んで Canvas について多くのことを学ぶことができたと思います。実際、Canvas 自体にはそれほど多くの API があるわけではありません。重要なのは、それらを柔軟に学習して使用し、API を組み合わせて驚異的な効果を生み出す方法を学ぶことです。残念ながら、この本は中国語版がまだないので、英語が苦手な方は待つ必要があります。

ご存知のとおり、現在すべてのブラウザが html5 をサポートしているわけではありません。html5 をサポートしているブラウザであっても、html5 のすべての新機能をサポートしているわけではありません。したがって、デバッグ環境としては比較的新しいブラウザを選択する必要があります。Firefox (開発者に人気) または Chrome ブラウザを使用することをお勧めします。すべてのサンプルは Firefox に基づいて開発されています。

html5 に関する基礎知識はここでは紹介しません。html5 に関するチュートリアルはインターネット上に多数ありますので、ご自身で学習してください。 HTML5 を学習するには、誰もが JavaScript の基礎をしっかりと身につけている必要があります。Uncle Tom のブログ http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html にアクセスして学習してください。実際、彼の一連のコースは非常に難しいもので、約 50 章すべてを学習できれば、JS のエキスパートとみなされるはずです。
ここで、キャンバス コースを正式に開始します。最初の例は「hello Canvas」です。
まず、次のように本文に Canvas タグを追加する必要があります:

コードをコピー

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

お使いのブラウザは HTML5 Canvas をサポートしていません。

キャンバス内のテキスト部分は、ブラウザがキャンバスオブジェクトをサポートしていない場合に表示されます。
は Canvas タグを定義します。js を通じて操作する必要がある場合は、getElementById を通じて実行できます。
var theCanvas = document.getElementById("canvasOne"); jquery を使用してタスクを開発することに慣れてきましたが、jquery を使用して Canvas オブジェクトを取得するにはどうすればよいでしょうか?
var Canvas = $('#canvasOne').get(0); または var Canvas = $('#canvasOne')[0]; get(0) と [ get() メソッドまたは [] サブスクリプトを使用しない場合、JS コードはキャンバスを正常に操作できません。 $('#canvasOne') は jquery オブジェクトを取得し、実際に操作したいのは html dom オブジェクトであるためです。 jquery オブジェクトを dom オブジェクトに変換する際に問題があります。この変換は get() または添字付けによって完了します。 dom オブジェクトを jquery オブジェクトに変換する必要がある場合は、$() メソッドを使用できます。知らない人は自分で百度に行くしかないので、ここでは詳しく説明しません。
コードの堅牢性を確保するには、ブラウザが Canvas オブジェクトをサポートしているかどうかを判断する必要があります。これは、次のコードによって実現できます。

コードをコピーしますコードは次のとおりです。

if (!theCanvas || !theCanvas.getContext) {
return;
}

ただし、この作業を完了するには、modernizr.js ライブラリを使用することをお勧めします。

コードをコピーしますコードは次のとおりです:

function CanvasSupport () {
return Modernizr.canvas;
}

canvas は、次のコードによって 実現される 2D レンダリングをサポートします: var context = theCanvas.getContext("2d");
これで、コンテキスト オブジェクトを通じてキャンバス上に画像を描画できるようになりました。

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

//領域の色を設定します
context .fillStyle = "#ffffaa";
//描画領域
context.fillRect(0, 0, 500, 300);
//フォントを設定
context.font = " 20px _sans";
//垂直方向の配置を設定します
context.textBaseline = "top";
//テキストを描画します
context.fillText ("Hello World!", 195, 80);
// 境界線の色を設定します
context.bloodStyle = "#000000"
//境界線を描画します
context.ストロークRect(5, 5, 490, 290);
絵の描き方を紹介します。画像は非同期でダウンロードされるため、キャンバスを使用して画像を描画するときに画像がダウンロードされていることを確認するために、次のメソッドを使用します:

コードをコピーします

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

var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif"; 🎜>helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}

画像が終了すると、onload イベントがトリガーされます。コンテキスト オブジェクトは画像を描画するために使用されます。
完全なコードを確認するにはデモをダウンロードしてください。デモのダウンロード アドレス:
html5canvas.helloworld.zip