H5のCanvasAPIを使用してグラフィックを描画する方法-H5 チュートリアル-php.cn

H5のCanvasAPIを使用してグラフィックを描画する方法

php中世界最好的语言

リリース： 2018-01-09 09:51:02

オリジナル

2377 人が閲覧しました

今回は、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的方法来调用绘图API

ログイン後にコピー

2. 基本 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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

H5のCanvasAPIを使用してグラフィックを描画する方法