HTMLキャンバス-htmlチュートリアル-php.cn

HTMLキャンバス

WBOY

リリース： 2024-09-04 16:39:45

オリジナル

903 人が閲覧しました

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

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

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

HTML キャンバス (

構文:

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

ログイン後にコピー

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

コード:

<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>

ログイン後にコピー

出力:

HTMLキャンバス

HTML キャンバス描画の例

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

1.ページに線を引く

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

コード:

<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>

ログイン後にコピー

出力:

HTMLキャンバス

2. HTML Canvas に円を描く

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

構文:

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

ログイン後にコピー

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

コード:

<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>

ログイン後にコピー

出力:

HTMLキャンバス

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

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

コード:

<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>

ログイン後にコピー

出力:

HTMLキャンバス

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

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

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

ログイン後にコピー

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

コード:

<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>

ログイン後にコピー

出力:

HTMLキャンバス

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

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

構文:

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

ログイン後にコピー

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

コード:

<html>
<body>
<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>
</body>
</html>

ログイン後にコピー

出力:

HTMLキャンバス

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

構文:

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

ログイン後にコピー

コード:

<html>
<body>
<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>
</body>
</html>

ログイン後にコピー

出力:

HTMLキャンバス

結論

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

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