JavaScriptCanvasAPIを使用した図形の描画

投稿日: 2022-04-20 2022-10-08
タグ: javascript

この記事では、複雑な形状を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キャンバスで実行できることはまだたくさんありますが、これがその可能性のいくつかへの良い最初の紹介であったことを願っています。

getdocs

13036