ホームページ > 記事 > ウェブフロントエンド > H5のCanvasAPIを使用してグラフィックを描画する方法
H5のCanvasAPIを使用してグラフィックを描画する方法
- php中世界最好的语言オリジナル
- 2018-01-09 09:51:022397ブラウズ
今回は、H5 の Canvas API を使用してグラフィックを描画する方法と、Canvas を使用してグラフィックを作成する方法を説明します。 Canvas でグラフィックを作成する際の 注意事項 は何ですか? 以下に実際のケースを見てみましょう。
Canvas 要素
次の HTML コードは Canvas 要素を定義します。
<!DOCTYPE html>
<html>
<head>
<title>Canvas快速入门</title>
<meta charset="utf-8"/>
</head>
<body>
<div>
<canvas id="mainCanvas" width="640" height="480"></canvas>
</div>
</body>
</html>次の Javascript ステートメントを通じてキャンバス要素にアクセスします:
//DOM写法
window.onload = function () {
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
};
//jQuery写法
$(document).ready(function () {
var canvas = $("#mainCanvas");
var context = canvas.get(0).getContext("2d");
});
//接下来就可以调用context的方法来调用绘图API2. 基本 API
2.1 座標系
キャンバス 2D レンダリング コンテキストは平面デカルト座標系を使用し、左上隅が原点 (0,0) です。 、および座標系の単位の 1 は、画面の 1 ピクセルに相当します。
//绘制一个填充矩形 context.fillRect(x, y, width, height) //绘制一个边框矩形 context.strokeRect(x, y, width, height) //清除一个矩形区域 context.clearRect(x, y, width, height)
2.2.2 線
線を描くことは、図形を描くこととは少し異なり、線は実際にはパスと呼ばれます。単純なパスを描画するには、まず beginPath メソッドを呼び出し、次に moveTo を呼び出してパスの始点座標を設定し、次に lineTo を呼び出して線分の終点座標を設定し (複数回設定可能)、 closePath を呼び出してパスの描画を完了します。最後に、ストロークを呼び出してアウトラインを描画します (または、fill を呼び出してパスを塗りつぶします)。以下は例です:
//示例 context.beginPath(); //开始路径 context.moveTo(40, 40); //移动到点(40,40) context.lineTo(300, 40); //画线到点(300,30) context.lineTo(40, 300); //画线到点(40,300) context.closePath(); //结束路径 context.stroke(); //绘制轮廓 //或者填充用context.fill();
2.2.3 円
キャンバスには実際には円を描くための特別なメソッドはありません。円弧を描くことで円をシミュレートできます。円弧はパスであるため、円弧を描画するための API は beginPath と closePath の間に含める必要があります。
2.3 スタイル
2.3.1 線の色を変更
var color; //指定RGB值 color = "rgb(255, 0, 0)"; //指定RGBA值（最后一个参数为alpha值，取值0.0~1.0） color = "rgba(255, 0, 0, 1)"; //指定16进制码 color = "#FF0000"; //用单词指定 color = "red"; //设置填充颜色 context.fillStyle = color; //设置边框颜色 context.strokeStyle = color;
2.3.2 線の幅を変更
//指定线宽值 var value= 3; //设置边框颜色 context.linewidth = value;
2.4 テキストを描画
//フォントスタイルを指定
context.font = "italic 30px大胆"; point (40,40) Draw text
context.fillText("Hello world!", 40, 40);
これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、他の関連コンテンツに注目してください。 php 中国語 Web サイトに記事が掲載されました。
関連記事:
ブートストラップでテーブルの合計の数を数える方法 JS を使用してアイコンの非表示と表示を同時に切り替える方法 JS を使用してアイコンを無効にする方法ボタンを有効にする以上がH5のCanvasAPIを使用してグラフィックを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。