検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 Canvas を使用して直線やポリラインなどの線を描く方法_html5 チュートリアル スキル

HTML5 Canvas を使用して直線やポリラインなどの線を描く方法_html5 チュートリアル スキル

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

HTML5 Canvas
html5 の基本概念の説明。開発者なら誰でも知っているはずなので、説明の必要はありません。 HTML5 は「新興」の Web テクノロジ標準であり、現在、IE8 以下を除くほとんどすべての主流ブラウザ (FireFox、Chrome、Opera、Safari、IE9) が HTML5 をサポートし始めています。また、モバイルブラウザ市場においても、多くのモバイルブラウザが「html5のサポート能力とパフォーマンス」を巡って軍拡競争を開始している。革新的な Web テクノロジ標準である html は、多くのブラウザ メーカーや組織からの強力なサポートと相まって、将来、HTML5 が Web テクノロジのリーダーになると考えられます。

「新興」と言われている html5 は、実際にはまったく新しいものではありません。結局のところ、html5 の最初の公式ドラフトは 2008 年にはすでに発表されていました。 2008年から数えるとかなりの時間が経ちました。しかし、今のところ、ほとんどの開発者にとって、それはまだ「雷は大きくなるが雨は少ない」状態です。HTML5 について聞く人はたくさんいますが、実際に HTML5 を使用している人はほとんどいません。

ご存知のとおり、html5 には多くの新機能が追加されました。 html5 の数多くの機能の中で、Canvas は最も目を引く新機能の 1 つと見なされるべきです。 html5 の Canvas オブジェクトを使用して、ブラウザの Web ページに直接グラフィックを描画します。これは、ブラウザーが Flash などのサードパーティのプラグインを使用せずに、Web ページ上にグラフィックスやアニメーションを直接表示できることを意味します。

ここで、HTML5 初心者向けに、HTML5 Canvas を使用して基本的なグラフィックを描画する方法を紹介しましょう。

まず、次の基本的な HTML コードを準備する必要があります:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <メタ charset="UTF- 8">
  5. <title>HTML5 Canvas 入門例タイトル>
  6. 頭>
  7. <ボディ>
  9. ボディ>
  10. html>

上記のコードは、HTML5 ページの基本的なコード テンプレートです。このうち、コードの最初の行 はドキュメント タイプ タグの命令であり、html5 ページの標準のドキュメント タイプ命令でもあり、ブラウザに「これは html5 ページです。解析してください」と伝えるために使用されます。 html5 Webページ標準に従って表示します。「このページ」。コードの 4 行目 は、ブラウザに「この html5 ページの文字エンコーディングは UTF-8 です」と伝えるために使用されます。これは、html5 の文字エンコーディングを記述する標準的な方法でもあります。ウェブページ。これは、以前の HTML 文字エンコード命令とは異なります。

XML/HTML コードコンテンツをクリップボードにコピー
  2. <メタ http-equiv=" Content-Type" content="text/html;charset=UTF-8">

ここで、上記のコードを含むhtmlファイルでCanvasにグラフィックスを描画する例を説明します。まず、上記のHTMLコードのbody部分に以下のcanvasタグを追加します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <メタ charset="UTF- 8">
  5. <title>HTML5 Canvas 入門例タイトル>
  6. 頭>
  7. <ボディ>
  10. <キャンバス id="myCanvas" 幅="400px" 高さ="300px" style="ボーダー: 1px 単色赤;">
  11. お使いのブラウザは Canvas タグをサポートしていません。
  12. キャンバス>
  14. ボディ>
  15. html>

現時点で、HTML5 をサポートするブラウザを使用してページを開くと、次のコンテンツが表示されます:
2016314110155998.png (455×321)

HTML5 では、canvas タグ自体には何の動作もありません。ページ上の指定されたサイズの空白スペースを占有するだけです。 Canvas タグは空白のキャンバスに相当します。また、JavaScript が提供する Canvas API を使用して、このキャンバスに必要なグラフィックを描画するための対応するコードを記述する必要があります。

注: Canvas タグ内のテキスト コンテンツは、HTML5 をサポートしていないブラウザでは表示されます。上記HTMLコードのように、お使いのブラウザがHTML5のcanvasタグをサポートしていない場合、canvasタグの部分に「お使いのブラウザはcanvasタグをサポートしていません」というテキストが表示されます。
「画家」として、私たちはまず、手に持っているブラシ、つまり JavaScript の Canvas オブジェクトとその関連コンテンツに慣れる必要があります。

HTML5 では、canvas タグは Canvas オブジェクトに対応し、JavaScript の document.getElementById() などの通常の関数を使用してオブジェクトを取得できます。 JavaScript では、Canvas オブジェクトを直接操作するのではなく、Canvas オブジェクトを通じて対応するグラフィックス描画コンテキスト オブジェクト CanvasRenderingContext2D を取得し、CanvasRenderingContext2D オブジェクトに付属する多くのグラフィックス描画関数を使用して描画することに注意してください。

各キャンバスが 1 つのブラシに対応しているようなものです。キャンバスに描画したい場合は、まず対応するブラシを取得し、次にこのブラシを使用してキャンバスに描画する必要があります。 CanvasRenderingContext2D オブジェクトはこのブラシに相当します。それでは、このブラシを JavaScript で取得してみましょう。

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");
    18. //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
    19. if(canvas.getContext){
    20. //対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
    21. var
  21. ctx = canvas.getContext("2d"); }
    23. スクリプト> ボディ> html>

    上記のコードに示すように、Canvas オブジェクトの getContext() メソッドを使用して CanvasRenderingContext2D オブジェクトを取得できます。注意深い読者ならお気づきかと思います。getContext() メソッドは文字列 2d を渡す必要があり、取得された CanvasRenderingContext2D オブジェクトの名前にも 2D が含まれています。これは、現在 html5 が 2D 描画のみをサポートしているためですが、将来の html5 では 3D またはその他の形式の描画もサポートされる可能性があります。その際、getContext("3d") を使用して CanvasRenderingContext3D オブジェクトを取得し、3D グラフィックスを描画する必要がある場合があります。

    html5 Canvas を使用して線 (直線、ポリラインなど) を描画します
    html5 Canvas を使用して直線を描画するために必要な CanvasRenderingContext2D オブジェクトの主なプロパティとメソッド ("() が付いたもの) " はメソッドです) は次のとおりです:

    属性或方法 基本描述
    strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
    globalAlpha 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
    lineWidth 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
    lineCap 指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。
    beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
    moveTo(int x, int y) 移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点
    lineTo(int x, int y) 使用直线连接当前端点和指定的坐标点(x,y)
    stroke(int x, int y) 沿着绘制路径的坐标点顺序绘制直线
    closePath() 如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。

    Canvas グラフィックスの描画プロセスでは、ほとんどの場合、特定の順序でいくつかの座標点 (いわゆる描画パス) を設定し、必要に応じて指定された方法でこれらの座標点を接続します。私たちが必要とする形。 CanvasRenderingContext2D オブジェクトの上記の API を理解すると、線の描画が非常に簡単になります。

    キャンバスを使用して基本的な直線を描画します

    次に、キャンバスを使用して最も基本的な直線を描きます。

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

    37. 表示効果は次のとおりです:
      2016314110545325.png (473×319)

      キャンバスを使用して色付きの直線を描きます

      ご存知のとおり、現実世界ではブラシも多様で、さまざまな色があります。同様に、Canvas ブラシ CanvasRenderingContext2D オブジェクトにも、必要なさまざまな色を設定できます。上記のコード例では、色を指定しない場合、キャンバス ブラシはデフォルトで最も一般的な黒に設定されます。

      ここで、再び Canvas ブラシを使用して青い直線を描きます (ページの簡素化に基づいて、重要な JavaScript コードのみを以下に示します。上記の完全なコード例も参照してください)。

      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. //直線の始点座標を(10,10)として定義します
      24. ctx.moveTo(10, 10);
      25. //直線の終点座標を (50,10) として定義します
      26. ctx.lineTo(50, 10);
      27. //座標点順序のパスに沿って直線を描画します
      28. ctx.ストローク();
      29. // 現在の描画パスを閉じます
      30. ctx.closePath();
      32. //色で直線を描きます
      33. ctx.moveTo(10, 30);
      34. ctx.lineTo(50, 30);
      35. //CSS カラー値のさまざまな表現をサポートします。「blue」、「#0000ff」、「#00f」、「rgb(0,0,255)」、「rgba(0,0,255, 1)」 )"
      36. // カラーなどのさまざまな設定は、最終的な描画関数の前に呼び出す必要があります ストローク()
        38. ctx.ストロークスタイル
      38. = "青"; ctx.ストローク();
      39. // 現在の描画パスを閉じます
      40. ctx.closePath();
      41. }
        43. スクリプト> ボディ> html> 対応する表示効果は次のとおりです:


      キャンバスを使用して基本的なポリラインを描画します2016314110709116.png (433×316)

      Canvas で直線を描くことをマスターすると、ポリラインやその他の形式の線を描くことがはるかに簡単になります。さらにいくつかのパスの中間点を描画し、それらを順番に接続するだけです。

      JavaScript コード

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

      2. The corresponding display effect is as follows:
        2016314110738804.png (424×315)

        After mastering the above content, I believe you have some basic understanding of using Canvas to draw lines. Since the control of line width, transparency, etc. only requires setting a single attribute, please refer to the relevant API above and will not go into details here.

        Strong note: When drawing a graphics path, be sure to call beginPath() first. The beginPath() method will clear the previous drawing path information in the memory. If you don't do this, it may have no effect on drawing a single shape, but when drawing multiple shapes (such as the two straight lines in the example above), it will lead to any unexpected results in operations such as path drawing or color filling.
        In addition, beginners must pay a little attention to the closePath() method, especially the red text in the description of the closePath() method in the API table above. In the code example above for drawing a polyline, we first called stroke() and then called closePath(). In fact, when the stroke() method is called, the polyline has already been drawn, and the current drawing path has been closed, so when the closePath() method is called again, it will not use a straight line to connect the current endpoint and the starting endpoint ( In other words, closePath() here is optional, but in order to maintain good habits, it is still recommended to write it). If we exchange the order of calling stroke() and closePath(), the situation is completely different. Since closePath() is called first and the drawing path is not closed at this time, closePath() will connect the current endpoint and the starting endpoint with a straight line.

        The sample code after exchanging the calling order of stroke() and closePath() is as follows:

        After exchanging the calling order, the corresponding display effect is as follows:
        2016314110800427.png (433×314)

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 の構造とセマンティクス (4): セマンティック インライン要素_html5 チュートリアル スキル次の記事：HTML5 の構造とセマンティクス (4): セマンティック インライン要素_html5 チュートリアル スキル

関連記事

続きを見る