まず、MDN 上の canvas の定義を引用します。

<canvas> は HTML5 で追加された要素で、JavaScript スクリプトを使用してグラフィックを描画できます。たとえば、描画、写真の合成、アニメーションの作成、さらにはリアルタイムのビデオ処理とレンダリングなどです。

つまり、これはブラウザが提供するキャンバスと豊富なインターフェースであり、さまざまな複雑なエフェクトを作成するために使用できます。 <canvas> 要素は、固定サイズのキャンバスを作成し、1 つ以上のレンダリングコンテキストを公開します。これは、表示されるページを描画および処理するために使用できます。 Canvas座標これは canvas 2d の座標です。左上が原点、横軸が x 軸、縦軸が y 軸であることがわかります。すべての canvas2d の機能実装は、この座標系で行われます。

基本的な使い方#

この記事では、長方形、線、円弧の描画方法について簡単に紹介します。

長方形#

簡単な例を通して、基本的な API について理解しましょう。

HTML:#

<canvas id="canvas" style="height:100%">
  当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

JavaScript:#

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var WINDOW_WIDTH = window.screen.availWidth;
var WINDOW_HEIGHT = window.screen.availHeight;
ctx.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30, 30, 55, 50);

ページには次のように表示されます。

まず、canvas 要素を取得し、getContext(‘2d’) を使用してそのレンダリングコンテキストを取得します。

clearRect(x, y, width, height)#

指定された領域をクリアします。アニメーションを作成する場合は、再レンダリングするたびにこの関数を呼び出して、前のフレームの内容をクリアする必要があります。

beginPath()#

新しいパスを作成します。

fillStyle#

塗りつぶす色を設定するために使用します。

ctx.fillRect(10, 10, 55, 50);#

x 軸が 10、y 軸が 10 の点を起点として、幅 55、高さ 50 の長方形を描画します。

strokeRect(x,y,width,height)#

fillRect との違いは、strokeRect が長方形の枠線を描画することです。以下に例を示します。

線#

三角形を描画します。

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.closePath();
ctx.stroke();

moveTo(x,y)#

開始点を定義し、この点から描画を開始します。

lineTo(x,y)#

現在の位置から指定された x および y 位置までの直線を描画します。

closePath()#

現在のパスを閉じます。lineTo を使用して開始点に戻ることもできます。

storke()#

既存のパスに基づいて線を描画します。つまり、stroke() を実行しない場合、キャンバスには何も表示されません。

円弧#

arc(x, y, radius, startAngle, endAngle, anticlockwise)#

このメソッドには 5 つのパラメータがあります。x,y は円弧が描画される円の中心座標です。radius は半径です。startAngle および endAngle パラメータは、開始角度と終了角度をラジアンで定義します。これらはすべて x 軸を基準にしています。パラメータ anticlockwise はブール値です。true の場合、反時計回り、それ以外の場合は時計回りです。直感的な例を見てみましょう。

ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
ctx.stroke();
ctx.clearRect(0, 0, 500, 500);
for (var i = 0; i < 4; i++) {
  for (var j = 0; j < 3; j++) {
    ctx.beginPath();
    var x = 20 + j * 40;
    var y = 20 + i * 40;
    var radisu = 20;
    var startAngle = 0;
    var endAngle = Math.PI + (Math.PI * j) / 2;
    var anticlockwise = i % 2 == 0 ? true : false;
    ctx.arc(x, y, radisu, startAngle, endAngle, anticlockwise);
    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

この例を通して、fill と stroke の 2 つの関数の違いを明確に理解できます。前者は枠線をレンダリングし、後者は指定された領域全体を塗りつぶします。同時に、anticlockwise がそれぞれ true と false の場合のレンダリングのメカニズムを区別できます。前者は反時計回り、後者は時計回りです。

まとめ#

この 3 つの基本的な使い方だけでも、多くの美しいアニメーションを作成できます。ここでは、簡単な運動をする小さなボールを作成し、境界判定も行いました。

参考記事： MDN-Canvas