HTML5 Canvas-線を描く

ラインメソッド

キャンバスに線を描くには、次のメソッドが必要です-

Sr.No.	Method and Description
1	beginPath() このメソッドは、現在のパスをリセットします。
2	moveTo(x, y) このメソッドは、指定されたポイントを持つ新しいサブパスを作成します。
3	closePath() このメソッドは、現在のサブパスをクローズとしてマークし、新しくクローズされたサブパスの開始および終了と同じポイントで新しいサブパスを開始します。
4	fill() このメソッドは、サブパスを現在の塗りつぶしスタイルで塗りつぶします。
5	stroke() このメソッドは、サブパスを現在のストロークスタイルでストロークします。
6	lineTo(x, y) このメソッドは、指定されたポイントを現在のサブパスに追加し、前のポイントに直線で接続します。

例

以下は、上記のメソッドを使用して三角形を描く簡単な例です。

<!DOCTYPE HTML>

<html>
   <head>

      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>

      <script type = "text/javascript">
         function drawShape() {

           //get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

           //Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {

              //use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');

              //Filled triangle
               ctx.beginPath();
               ctx.moveTo(25,25);
               ctx.lineTo(105,25);
               ctx.lineTo(25,105);
               ctx.fill();

              //Stroked triangle
               ctx.beginPath();
               ctx.moveTo(125,125);
               ctx.lineTo(125,45);
               ctx.lineTo(45,125);
               ctx.closePath();
               ctx.stroke();
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>

</html>

上記の例では、次の形状を描画します-

線のプロパティ

線のスタイルを設定できるプロパティがいくつかあります。

S.No.	Property and Description
1	lineWidth [ = value ] このプロパティは現在の線幅を返し、設定して線幅を変更できます。
2	lineCap [ = value ] このプロパティは現在のラインキャップスタイルを返し、ラインキャップスタイルを変更するために設定できます。可能なラインキャップスタイルは、butt、round、、_ square_です。
3	lineJoin [ = value ] このプロパティは現在の線の結合スタイルを返し、設定して線の結合スタイルを変更できます。可能な線の結合スタイルは、bevel、round、、miterです。
4	miterLimit [ = value ] このプロパティは、現在のマイター制限率を返し、マイター制限率を変更するために設定できます。

例

以下は、_lineWidth_プロパティを使用して異なる幅の線を描く簡単な例です。

<!DOCTYPE HTML>

<html>
   <head>

      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>

      <script type = "text/javascript">
         function drawShape() {

           //get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

           //Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {

              //use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');

               for (i=0;i<10;i++){
                  ctx.lineWidth = 1+i;
                  ctx.beginPath();
                  ctx.moveTo(5+i*14,5);
                  ctx.lineTo(5+i*14,140);
                  ctx.stroke();
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

上記の例では、次の形状を描画します-

Html5-canvas-drawing-lines

HTML5 Canvas-線を描く

ラインメソッド

例

線のプロパティ

例

目次