HTML5 キャンバスの詳細な紹介

この記事では主に、Web ページにグラフィックを描画するために使用される canvas 要素について説明します。興味のある方はぜひ

HTML5のキャンバスの機能について

1.まずキャンバス(キャンバス)を作成します

2.

JavaScript

を使って画像を描画します3. . Canvas - Path

moveTo(x,y) ラインの開始座標を定義

lineTo(x,y) ラインの終了座標を定義

1, Canvas 定義

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>

Default < Canvas> キャンバスには、ページ上に空白の境界線のない四角形が表示されます。アウトラインを表示するには、スタイル ルールを定義して点線の境界線を追加します。

<script>
      Var c=document.getElementByID(“myCanvas”)//得到画布
      Var ctx=c.getContext(“2d”);//得到画笔
      Cxt.fillStyle=”#FF0000”;//填充颜色
      Cxt.fillRect(0,0,150,75);//规定顶点
</script>

2、Canvas のコンテキスト オブジェクトを取得します

drawing

タスクを完了するには、まず、 オブジェクトを取得し、その 2 次元描画コンテキストを取得します。

次の例は、ページのロード時に描画コンテキストを取得する方法を示しています:

<canvas id="myCanvas" width="400" height="200">

3、直線を描きます

(1) 以下では、開始点は (50,50) であり、終点は (150,150) 直線

canvas {
    border: 1px dashed black;
}

(2) lineWidth 属性とストロークスタイル 属性

を使用して、線の幅と色をそれぞれ設定します

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        //这里写绘图代码
    }
</script>

(3) lineCap 属性を使用して、線の両端の形状を設定します (線頭タイプ):

butt: 四角頭 (デフォルト値)

1. round: 丸い頭

2. square: 長くなった四角頭 (効果は butt と似ていますが、線幅の半分が線の両端に追加されます) length)

context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

注: 描画コンテキストの beginPath() メソッド

上の例では、新しい線分の描画が開始されるたびに beginPath() メソッドを呼び出す必要があることがわかります。

そのようなステップがない場合は、ストローク()が呼び出されるたびに、キャンバス上の元の線分が再描画されます。特に上記の例のように、新しい線分を描画するときにコンテキスト プロパティを変更する必要があります。 beginPath() メソッドが呼び出されない場合、元の直線も新しいスタイルを使用して描画されます。

以上がHTML5 キャンバスの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。