JavaScriptCanvasAPIを使用した図形の描画

この記事では、複雑な形状をWebページにレンダリングするためのHTMLキャンバス要素とJavaScriptキャンバスAPIについて説明します。

設定

開始する必要があるのは、canvasタグとそれを操作するためのJavaScriptファイルを含むHTMLページです。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>HTML Canvas</title>
  </head>
  <body>

    <canvas></canvas>

  </body>
  <script src="./canvas.js"></script>
</html>

キャンバス要素を配置したら、それとキャンバスコンテキストを使用して新しい変数を作成する必要があります。これにより、キャンバスに一連の機能が追加されます。物事を単純にするために、2D形状に固執しますが、webglコンテキストでは、3Dも可能です。

この例では、キャンバスをフルスクリーンにする必要がありますが、CSSを使用してサイズを設定すると、奇妙なぼやけた効果が作成されます。これは明らかに望ましくないため、ここで設定する必要があります。

canvas.js

// getting a reference to our HTML element
const canvas = document.querySelector('canvas')

// initiating 2D context on it
const c = canvas.getContext('2d')

addEventListener('resize', () => {
  canvas.width = innerWidth
  canvas.height = innerHeight
})

長方形

長方形を描画するには、コンテキスト変数（c）で、ピクセル単位で測定したものを追加し始めます。

rect(x-axis, y-axis, width, height)：長方形の位置と寸法を設定し、strokeまたはfillの前に呼び出す必要があります。
stroke：その前にあるすべてのアウトラインをレンダリングします。
fill：形状全体を単色でレンダリングします。
strokeStyleおよびfillStyle：輪郭と形状の色を設定します。これらは他の関数のような関数ではなく、文字列を割り当てる必要があります。
strokeRectおよびfillRect：strokeおよびfillと同じですが、そのアイテムのみがrectと同じように機能します。
clearRect(x-axis, y-axis, width, height)：特定の領域内のすべてをクリアします。常に新しい要素をレンダリングしていて、古い要素を残したくないアニメーションに入るときに非常に便利です。

canvas.js

c.strokeStyle = 'white'
c.fillStyle = 'blue'
c.rect(100, 20, 150, 100)
c.stroke()
c.fill()

c.fillStyle = 'red'
c.fillRect(400, 500, 300, 250)

// Uncomment to remove the first two blocks
// c.clearRect(0, 0, canvas.width, canvas.height)
c.fillStyle = 'green'
c.fillRect(1500, 500, 300, 250)

線

beginPath：新しい行を開始します
stroke：行をレンダリングします
moveTo(x-axis, y-axis)：開始点を設定します
lineTo(x-axis, y-axis)：前のエンドポイントから線をレンダリングします
lineWidth：線の太さを設定します

そして、ここにいくつかの線を引くいくつかの例があります：

// Just a basic line
c.beginPath()
c.moveTo(40, 250)
c.lineTo(200, 500)
c.strokeStyle = 'red'
c.stroke()

// Draw the letter M
c.beginPath()
c.moveTo(1500, 700)
c.lineTo(1600, 450)
c.lineTo(1700, 700)
c.lineTo(1800, 450)
c.lineTo(1900, 700)
c.strokeStyle = 'blue'
c.stroke()

// Let's now draw a house
c.lineWidth = 10
c.strokeStyle = 'red'
c.fillStyle = 'red'

// Walls 
c.strokeRect(800, 500, 300, 200)

// Door
c.fillRect(925, 600, 50, 100)

// Roof 
c.beginPath()
c.moveTo(700, 500)
c.lineTo(1200, 500)
c.lineTo(950, 300)
c.lineTo(700, 500)
c.stroke()

サークル

円を描くために本当に必要な唯一の方法はarcです。角度は度ではなくラジアンで取得されるため、終了角度にはMath.PI * 2を使用できます。これは360度に等しく、開始角度は0のままにすることができるためです。 counterclockwiseの値を指定する必要はないので、デフォルトでfalseになっているので、そのままにしておくことができます。

arc(x, y, radius, starting-angle, end-angle, counterclockwise (boolean))

canvas.js

c.lineWidth = 5
c.beginPath()
c.arc(400, 400, 50, 0, Math.PI * 2)
c.stroke()

二次曲線とベジェ曲線

PhotoshopやAffinityDesignerなどのグラフィックデザインツールを使用したことがある場合、これらは一部のラインツールと非常によく似ているように見えます。

基本的に、2次曲線とベジェ曲線は、さまざまな制御方法を備えた単なる自由形式の線です。二次曲線は、始点、終点、および線を曲線化するためのハンドルとして機能するコントロールポイントと呼ばれるものだけがあるという点で単純です。すばらしいインタラクティブな例ここを見ることができます。一方、ベジェ曲線には、より複雑な形状の曲線の両端に2つの制御点があります。もう1つのすばらしい例ここ。

quadraticCurveTo(controlPoint-x, controlPoint-y, endpoint-x, endpoint-y)
bezierCurveTo(startControlPoint-x, startControlPoint-y, endControlPoint-x, endControlPoint-y, endpoint-x, endpoint-y)

そしていくつかの例：

canvas.js

c.lineWidth = 5
c.strokeStyle = 'white'

c.beginPath()
c.moveTo(400, 400)
c.lineTo(400, 300)
c.quadraticCurveTo(450, 250, 500, 300)
c.lineTo(500, 400)
c.stroke()

c.beginPath()
c.moveTo(800, 400);
c.bezierCurveTo(800, 150, 1200, 700, 1200, 400);
c.stroke()

文章

テキストは、スタイル設定のためのいくつかのCSSのようなオプションを備えた長方形と非常によく似ています。

fillText(text, x, y)
strokeText(text, x, y)
font:ピクセル単位のサイズとフォントファミリの文字列を取ります。 '60px Times-New-Roman'のように。
textAlign：対応するCSSと同じオプションを持つ文字列を取ります。 start、end、left、right、およびcenter。

canvas.js

c.font = '60px Times-New-Roman'
c.fillText("Hello World", 600, 500)
c.strokeText('Hello World', 1200, 500)

結論

アニメーションや双方向性のようなHTMLキャンバスで実行できることはまだたくさんありますが、これがその可能性のいくつかへの良い最初の紹介であったことを願っています。