Canvas テクノロジーの応用を深くマスターする-htmlチュートリアル-php.cn

Canvas テクノロジーの応用を深くマスターする

キャンバステクノロジは Web 開発の非常に重要な部分であり、Web ページ上にグラフィックやアニメーションを描画するために使用できます。 Web アプリケーションにグラフィックス、アニメーション、その他の要素を追加したい場合は、Canvas テクノロジを見逃すことはできません。この記事では、Canvas テクノロジーについて詳しく説明し、いくつかの具体的なコード例を示します。

Canvas の概要

Canvas は HTML5 の要素の 1 つで、Web ページ上にグラフィックやアニメーションを動的に描画する方法を提供します。 Canvas には 2D と 3D の 2 つの描画方法が用意されていますが、この記事では主に 2D 描画について説明します。

Canvas の基本的な使い方

Canvas は HTML5 の要素です。これを使用するには、HTML ドキュメント内に Canvas 要素を作成するだけです:

<canvas id="myCanvas"></canvas>

ログイン後にコピー

JavaScript では、Canvas の getContext() メソッドを使用して、描画操作の描画コンテキストを取得できます。例:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ログイン後にコピー

2D コンテキストを取得した後、描画操作を開始できます。一般的に、描画プロセスは大まかに次のとおりです:

線の幅や色などの描画パラメータを設定します;
円を描くなどのパスを開始します。長方形;
長方形の塗りつぶし、円弧の描画などのグラフィックの描画;
パスを終了します。

次は、Canvas で赤い四角形を描画するための最も基本的な例です:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

ログイン後にコピー

この例では、最初に Canvas のコンテキストを取得し、次に赤い塗りつぶしを設定します。 color を指定し、fillRect() メソッドを使用して正方形を塗りつぶします。

キャンバス描画操作

3.1 四角形の描画

四角形の描画は Canvas で最も一般的な操作の 1 つであり、fillRect を通じて実行できます。 ()、ストロークRect ()、およびrect()メソッドを使用して、塗りつぶし、境界線付き、または塗りつぶしと境界線なしの四角形を描画します。

fillRect(x, y, width, height): 現在の塗りつぶし色で四角形を塗りつぶします。

ストロークRect(x, y, width, height): 現在の線スタイルを使用して長方形の境界線を描画します。

rect(x, y, width, height): 長方形のパスを作成しますが、自動的には描画されません。

以下は四角形を描画する例です:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);

ctx.strokeStyle = "red";
ctx.strokeRect(10, 70, 100, 50);

ctx.beginPath();
ctx.rect(10, 130, 100, 50);
ctx.closePath();
ctx.stroke();

ログイン後にコピー

この例では、まず fillRect() メソッドを使用して青い四角形を描画し、ストロークRect() を使用して赤い境界線を描画します。方法。最後に、rect() メソッドを使用してパスを作成しますが、すぐに描画するのではなく、ストローク() メソッドを使用してパスを描画します。

3.2 テキストの描画

Canvas にはテキストを描画するためのメソッドも用意されており、fillText() メソッドとストロークText() メソッドを使用して Canvas にテキストを描画できます。

fillText(text, x, y, maxWidth): 現在の塗りつぶしスタイルを使用して、指定された位置に指定されたテキストを描画します。

ストロークText(text, x, y, maxWidth): 現在の線スタイルを使用して、指定された位置に指定されたテキストを描画します。

以下はテキストを描画する例です:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("Hello, Canvas!", 10, 50);

ctx.strokeStyle = "blue";
ctx.strokeText("Hello, Canvas!", 10, 100);

ログイン後にコピー

この例では、最初にテキストのフォントと色を設定し、次に fillText() メソッドを使用して赤いテキストを描画します。そして、ストロークText() ) メソッドを使用すると、テキストが青い境界線で描画されます。

3.3 パスの描画

パスの描画は、Canvas でカスタムの図形や線を描画するために使用されるメソッドの 1 つであり、beginPath()、moveTo()、lineTo()、および closePath() を使用できます。パスを描画するメソッド。

beginPath(): パスを開始するか、現在のパスをリセットします。

moveTo(x, y): パスを指定された場所に移動します。

lineTo(x, y): 指定した位置まで直線を描きます。

closePath(): 現在のパスを閉じます。

以下はパスを描画する例です:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

ログイン後にコピー

この例では、最初に beginPath() メソッドを呼び出してパスを開始し、次に moveTo() メソッドを使用して移動します。 (50, 50) へのパス、次に lineTo() メソッドを使用して (150, 50) に線を描画し、引き続き lineTo() メソッドを使用して (150, 150) に線を描画し、最後に使用しますclosePath() メソッドを使用してパスを閉じます。最後に、fill() メソッドを使用してパスを埋めます。

3.4 円弧の描画

円弧の描画は、Canvas で円やリングなどを描画するメソッドの 1 つで、arc() メソッドを使用して描画できます。

arc(x, y, radius, startAngle, endAngle, antiwatchwise): 現在の点から始まる円弧を描きます。

x, y: 円の中心の座標。

radius: 半径。

startAngle: 開始角度 (ラジアン単位)。

endAngle: 終了角度 (ラジアン単位)。

反時計回り: 描画方向。true は反時計回り、false は時計回りです。デフォルトは false です。

以下は円弧を描画する例です:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();

ログイン後にコピー

この例では、まず beginPath() メソッドを呼び出してパスを開始し、次に arc() メソッドを呼び出して描画します。弧。最後に、線の幅と色が設定され、ストローク() メソッドが呼び出されて線を描画します。

Canvas のアニメーション効果

Canvas は静的なグラフィックを描画するだけでなく、アニメーション効果も実現できます。これは、キャンバス上に複数のグラフィックを描画し、それらを異なる時点で再描画することによって実現されます。タイマーを使用すると、指定した時間間隔内で Canvas 描画メソッドを繰り返し呼び出して、アニメーション効果を実現できます。

次は、Canvas を使用して単純なアニメーションを実装する例です:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
var speed = 5;
var dirX = 1;
var dirY = 1;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.fillStyle = "blue";
    ctx.fill();

    if (x + radius >= canvas.width || x - radius <= 0) {
        dirX = -dirX;
    }
    if (y + radius >= canvas.height || y - radius <= 0) {
        dirY = -dirY;
    }

    x += speed * dirX;
    y += speed * dirY;

    requestAnimationFrame(animate);
}

animate();

ログイン後にコピー

在这个示例中，我们使用Canvas绘制了一个蓝色圆形。然后通过不断调整圆形的位置实现动画效果。如果圆形碰到了Canvas的边界，我们就调整移动的方向。最后使用requestAnimationFrame()方法在动画完成之前不断调用animate()方法。