検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 で三角形や四角形などの多角形を描画する方法 Canvas_html5 チュートリアルのヒント

HTML5 で三角形や四角形などの多角形を描画する方法 Canvas_html5 チュートリアルのヒント

WBOY
WBOYオリジナル
2016-05-16 15:51:501686ブラウズ

HTML5 Canvas を使用してポリゴンを描画するために必要な CanvasRenderingContext2D オブジェクトの主なプロパティとメソッド (() が付いたものはメソッド) は次のとおりです。


三角形を描く

JavaScript コードコンテンツをクリップボードにコピーします
  4. "UTF-8">
  5. HTML5 キャンバス描画トライアングル入門例
  10. <キャンバス ID="myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
    11. お使いのブラウザは Canvas タグをサポートしていません。
    15. <スクリプトタイプ=
  15. "text/javascript">
  16. //Canvas オブジェクト (canvas) を取得します
  17. var Canvas = document.getElementById("myCanvas");
    18. //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
    19. if
  19. (canvas.getContext){
    20. //対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
    21. var
  21. ctx = Canvas.getContext("2d");
    23. //新しい描画パスを開始
  23. ctx.beginPath();
    25. //線の色を青に設定します
  25. ctx.ストロークスタイル =
    26. "青"
  26. ; //パスの始点座標を設定します
  27. ctx.moveTo(20, 50);
  28. //座標点(60, 50)まで直線を描画
  29. ctx.lineTo(20, 100);
  30. //座標点(60, 90)まで直線を描画
  31. ctx.lineTo(70, 100);
  32. //まず描画パスを閉じます。現在のエンドポイントと開始エンドポイントを結ぶために直線が使用されることに注意してください。
  33. ctx.closePath();
  34. //最後に描画パスに従って直線を描きます
  35. ctx.ストローク();
    36. }

  40. 対応する表示効果は次のとおりです:
    2016314112438272.png (421×318)

    四角形の描画
    Canvas の四角形描画を個別に説明する理由は、Canvas ブラシ ツールの CanvasRenderingContext2D オブジェクトが四角形を描画するための専用メソッドを提供するためです。

    XML/HTML コードコンテンツをクリップボードにコピー
    1. >
    2. <html>
    3. <頭>
    4. <メタ charset="UTF- 8">
    5. <title>HTML5 キャンバス描画四角形の入門例< / タイトル>
    6. 頭>
    7. <ボディ>
    10. <キャンバス id="myCanvas" 幅="400px" 高さ="300px" style="ボーダー: 1px 単色赤;">
    11. お使いのブラウザは Canvas タグをサポートしていません。
    12. キャンバス>
    14. <スクリプト type="text/ javascript">
    15. //Canvas オブジェクト (キャンバス) を取得します
    16. var canvas = ドキュメント.getElementById("myCanvas");
      17. //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
      18. if(canvas.getContext){
      19. //対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
      20. var
    20. ctx = canvas.getContext("2d");
    21. //新しい描画パスを開始
    22. ctx.beginPath();
    23. //線の色を青に設定します
      25. ctx.ストロークスタイル
    25. = "青"; //キャンバス上の座標点(10,10)を描画開始点として、幅80px、高さ50pxの長方形を描画します
      26. ctx.rect(10, 10, 80, 50);
      27. //指定されたパスに従って直線を描画します
      28. ctx.ストローク();
      29. //描画パスを閉じる
      30. ctx.closePath();
      31. }
      33. スクリプト
    33. >
      34. ボディ
    34. >
      35. html
    35. > 対応する長方形エフェクトは次のように表示されます:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 Canvas を使用して直線やポリラインなどの線を描く方法_html5 チュートリアル スキル次の記事：HTML5 Canvas を使用して直線やポリラインなどの線を描く方法_html5 チュートリアル スキル

関連記事

続きを見る