HTMLキャンバス

この記事では HTML Canvas の概要を説明します。すでにご存知のとおり、HTML はマークアップ言語です。訪問者に情報を提示するには、表示するテキストとその表示方法 (フォント サイズ、色、方向など) を含む HTML を作成できます。ページにビジュアルを追加する場合は、リンクする必要があります。ホスト上の HTML ファイルとは別に保存される画像をページに埋め込みます。

しかし、ページ上に何かを描く必要がある場合はどうすればよいでしょうか?

HTML キャンバスとは何ですか?

HTML キャンバス ( タグ経由で使用) は、ユーザーのコンピューター画面上にグラフィックス (線、棒、グラフなど) をオンザフライで描画するために使用される HTML 要素です。ただし、canvas 要素は単なる情報のコンテナーです。描画は JavaScript を介して行われます。これは、HTML5 をサポートし、JavaScript をレンダリングできるすべての最新の Web ブラウザーでサポートされています。 HTML キャンバスの作成は非常に簡単で、 に追加できます。以下を介して任意の HTML ページにアクセスできます。

構文:

<canvas id="example" width="200" height="200">
<em>Content here</em>
</canvas>

幅と高さの属性を使用してキャンバスのサイズを定義できます。タグ内で要素 ID を定義することもできるため、canvas 要素で CSS スタイルを使用できるようになります。以下は、Canvas 要素を使用して四角形を描画する方法の例です。

コード:

<style>
#examplecanvas{border:2px solid green;}
</style>


<canvas id="examplecanvas" width="500" height="300"></canvas>

出力:

HTML キャンバス描画の例

canvas 要素を使用して四角形を描画する方法を確認したので、ブラウザ出力画面でこの要素を使用して描画できる他のオブジェクトを見てみましょう。

1.ページに線を引く

moveTo()、ストローク()、およびlineTo()は、Webページ上に直線を描くために使用できるメソッドです。ご想像のとおり、moveTo() は要素空間内でのカーソルの位置を伝え、lineTo() は線の終点を伝えるメソッドです。ストローク()は線を可視にします。参考用のコードは次のとおりです:

コード:

<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>


<canvas id="examplecanvas" width="400" height="300"></canvas>

出力:

2. HTML Canvas に円を描く

長方形とは異なり、JavaScript には円を描画するための特別なメソッドはありません。代わりに、円弧を描いてキャンバス内に円を描くために使用される arc() メソッドを使用できます。円が描かれたキャンバスを取得するには、次を使用できます:

構文:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

これは円のあるページの例です:

コード:

<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>


<canvas id="examplecanvas" width="500" height="300"></canvas>

出力:

3. HTML Canvas にテキストを描画する

HTML キャンバスにテキストを描画することもできます。キャンバスにテキストを取得するには、filltext() メソッドを使用できます。以下は、canvas 要素内にテキストを含む HTML ページの例です:

コード:

<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
};
</script>


<canvas id="examplecanvas" width="500" height="200"></canvas>

出力:

4. HTML キャンバス内に円弧を描く

円で説明したように、HTML Canvas 内に円弧を描くために使用される arc() というメソッドがあります。変数を追加するだけで済むメソッドの構文は次のとおりです。

context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);

以下は、canvas 要素内に円弧がある HTML ページです:

コード:

<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>


<canvas id="examplecanvas" width="600" height="400"></canvas>

出力:

5.線形または円形のカラー グラデーションを描画する

このメソッドを使用して createLienearGradient() を使用すると、キャンバス要素内に選択したグラデーションを描画できます。このメソッドでは、addColorStop() を使用してグラデーション カラーを示す必要があります。

構文:

var gradient = context.createLinearGradient(startX, startY, endX, endY);

これは線形グラデーションのあるページです:

コード:

<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,150);
</script>

出力:

同様に、円形のグラデーションを描画するメソッドは createRadialGradient() です。

構文:

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

コード:

<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80,50,10,100,50,90);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>

出力:

結論

これが何であるか、そしてそれが Web ページでどのように使用できるかについて理解できたので、自分の Web デザイン スキルにもっと自信を持てるはずです。場合によっては画像を使用することもできますが、HTML キャンバスの利点は、スケーラブルであり、サイズと処理能力の点ではるかに軽量であることです。

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