HTML5 でテキストと画像を描画するための基本的なチュートリアル Canvas_html5 チュートリアルのスキル

テキストを描画

HTML5 では、必要なテキストを Canvas「キャンバス」上に描画することもできます。関連する CanvasRenderingContext2D オブジェクトの主なプロパティとメソッドは次のとおりです。

上記の API の説明情報から、Canvas でテキストを描画するには 2 つの方法があることがわかります。1 つは、fillText() fillStyle を使用して塗りつぶされた (塗りつぶされた) テキストを描画する方法で、もう 1 つは、ストロークText() ストロークスタイルを使用して描画する方法です。塗りつぶされていない（中空の）テキスト。

次に、キャンバスを使用してソリッド テキストを描画する方法を見てみましょう。具体的な HTML コードは次のとおりです。

JavaScript コードコンテンツをクリップボードにコピーします

4. "UTF-8">
10. <キャンバス ID="myCanvas" width="400px" height="300px" style="border: 1px 単色赤;"> お使いのブラウザは Canvas タグをサポートしていません。
13. <スクリプトタイプ=
14. "text/javascript">
15. //Canvas オブジェクト (canvas) を取得します
16. var Canvas = document.getElementById("myCanvas"); //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
17. if
18. (canvas.getContext){ //対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
19. var
20. ctx = Canvas.getContext("2d");
21. //フォントスタイルを設定
22. ctx.font = "30px Courier New";
23. //フォントの塗りつぶしの色を設定します
24. ctx.fillStyle = "青";
25. //座標点 (50,50) からテキストの描画を開始 ctx.fillText(
26. "CodePlayer 中国語テスト", ); }

対応する表示効果は次のとおりです:


次に、他の環境条件を変更せずに、ストロークText() ストロークスタイル メソッドを再度使用して、上記の例のテキストを描画します。

JavaScript コードコンテンツをクリップボードにコピーします
ブラウザを使用してページに再度アクセスすると、次の表示効果が表示されます (効果画像内の「CodePlayer」という文字は実際には中空ですが、フォントが小さいため、両側が重なって見えます)。
絵を描く

HTML5 では、キャンバスを使用してベクター グラフィックを描画することに加えて、キャンバス「キャンバス」上に既存の画像ファイルを描画することもできます。
まず、canvas を使用して画像ファイルを描画するために必要な CanvasRenderingContext2D オブジェクトの主なプロパティとメソッドを見てみましょう。


XML/HTML コード
コンテンツをクリップボードにコピー

drawImage(混合画像, int x, int y)
1. キャンバス上の指定した座標点を起点として、画像の元のサイズに合わせて画像全体を描画します。ここでの画像はImageオブジェクトでもCanvasオブジェクトでも構いません(以下同様)。
XML/HTML コード
コンテンツをクリップボードにコピー




drawImage(混合イメージ、int x、int y、int width、int height)
1. キャンバス上の指定した座標点から開始し、指定したサイズ (幅と高さ) で画像全体を描画します。画像は指定したサイズに応じて自動的に拡大縮小されます。
   drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int CanvasX, int CanvasY, int CanvasWidth, int CanvasHeight)
   指定された画像の部分画像を変換します (with (imageX, imageY)左上隅の座標として、幅は imageWidth、高さは imageHeight) が、左上隅の座標として (canvasX, CanvasY) を持つ長方形の領域にキャンバスに描画されます。幅は CanvasWidth、高さは CanvasHeight
   はい、それを正しく読んでください。 Canvas に画像を描画するには、drawImage() というメソッドを使用できますが、このメソッドには 3 つの異なるバリアントがあり、異なる数のパラメータを受け取ることができるだけでなく、同じパラメータの意味も受け取ることができます。

   ここでは、上記の 3 つのバリエーションのそれぞれの例を示します。

   まず、drawImage() の最初のバリアントを使用して、キャンバス上に Google ロゴ画像を描画します (元のサイズは 550 x 190)。

   JavaScript コードコンテンツをクリップボードにコピーします

   4. "UTF-8">
   10. <キャンバス ID="myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
   お使いのブラウザは Canvas タグをサポートしていません。
   <スクリプトタイプ=
   14. "text/javascript">
   15. //Canvas オブジェクト (canvas) を取得します
   16. var Canvas = document.getElementById("myCanvas");
   //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
   if
   18. (canvas.getContext){
   //対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
   var
   20. ctx = Canvas.getContext("2d");
   21. //新しい画像オブジェクトを作成します
   22. var
   img =
   23. new Image(); //画像のURLを指定
   24. img.src = "http://www.365mini.com/image/google_logo.png";
   25. // ブラウザは画像をロードした後に画像を描画します
   img.onload =
   26. function(){
   27. //Canvas キャンバス上の座標 (10,10) を始点として、画像を描画します
   ctx.drawImage(img, 10, 10);
   28. }; }

   32. 対応する表示効果は次のとおりです:
       

       Google ロゴ画像が大きすぎてキャンバスのサイズ範囲を超えているため、画像の一部しか表示できません。この時点で、2 番目のバリエーションを使用して、Google ロゴ画像を指定された幅と高さに縮小し、キャンバスに描画します。

       JavaScript コードコンテンツをクリップボードにコピーします

       3. Google ロゴ画像を拡大縮小すると、キャンバスに画像全体が表示されるようになります:
       4. 最後に、3 番目のメソッド バリアントを使用して、Google ロゴの「Goo」部分をキャンバスに描画します (「Goo」部分の画像サイズは Photoshop などのツールを使用して測定でき、測定されたサイズが使用されます)結果はここに直接表示されます）。

       JavaScript コード

       コンテンツをクリップボードにコピーします
       

       3. この時点で、キャンバスに「Goo」の部分画像が表示されていることがわかります。