HTML5キャンバス

<キャンバスID = mycanvas幅= 400高さ= 200>

デフォルトの<canvas>キャンバスは、ページに空白のボーダーレスの長方形を表示します。輪郭を表示するために、スタイルのルールを定義することにより、点線のベゼルを追加します。

キャンバス{境界：1pxダッシュブラック;}

描画タスクを完了するには、まず、<canvas>オブジェクトを取得し、2次元の描画コンテキストを取得する必要があります。

次のサンプルデモは、ページがロードされたときに図面の図面によって取得されます。

 <script> window.onload = function（）{var canvas = document.getElementById（mycanvas）;

（1）出発点は（50,50）未満（50,50）で、終了点は（150,150）直線線です

Context.Moveto（50、50）;

（2）線の幅と色を線幅とストロークスタイルの属性を設定します

// width context.linewidth = 10; 50）; lineto（150、150）;

（3）LineCAPプロパティで行の両端（ラインヘッドタイプ）の形状を設定します。

1. バット：fangtou（デフォルト値）
2. ラウンド：丸い頭
3. 正方形：正方形の頭を伸ばす（効果は尻に似ていますが、線の2行の長さは線の幅の半分の長さを増加させます）

 var canvas.getElementbyid（mycanvas）; side tore.moveto（50、50）; ; context.linecap = square.stroke（）;

上記の例では、新しいラインセグメントが描画されるたびに、beginpath（）メソッドが呼び出されることがわかります。

このステップがなければ、stroke（）を呼び出すたびに、キャンバスの元のラインセグメントを再ドローします。特に、上記の例と同様に、Context属性を新しいラインを描画するときに変更する必要があります。