Canvas 入門/基本文法

キャンバスを使い始める

1. キャンバスとは

Canvas中国語名は「キャンバス」というHTML5新しいレーベルです。

Canvas開発者がこのラベルにさまざまなパターンを描画できるようにしますJS。

Canvasパス、長方形、円、文字、絵を描く方法はたくさんあります。

Canvas場合によっては写真を「置き換え」ることもできます。

Canvasアニメーション、ゲーム、データ視覚化、画像編集、リアルタイムビデオ処理などの分野で使用できます。

2. キャンバスを使用してグラフィックを描画する手順

a. HTMLでcanvas要素を作成します。

b. jsを介してcanvasタグを取得します

c. Canvas タグから描画ツールを取得します。

d. 描画ツールを使用して、キャンバスラベルにグラフ線を描画します

<canvas id="cvs"></canvas> // 步骤a

<script>
    let cvs = document.getElementById('cvs') // 步骤b
    let ctx = cvs.getContext('2d'); // 步骤c
    <!-- 步骤d -->
    ctx.moveTo(100, 100); // 起点坐标
    ctx.lineTo(200, 100); // 下一个点的坐标
    ctx.stroke(); // 将所有坐标用一条线连起来
</script>

**注意: **キャンバスのデフォルトの幅と高さは 300px*150px です。CSS を使用してキャンバスの幅と高さを設定することはできません。そうしないと、コンテンツが引き伸ばされてしまいます (キャンバスには、幅と高さの 2 つのプロパティが用意されており、幅と高さ)

3. 座標系

数学における座標系の y 軸とは逆です (y 軸の正の方向は下向きで、原点はブラウザの左上隅にあります)。

4. ライン

線のデフォルトの幅は 1 ピクセル、デフォルトの色は黒です (ただし、デフォルトでは、キャンバスは線の中心点をピクセルの下端に揃えるため、表示効果は 2 ピクセルになり、純粋な黒ではなくなります) ）

lineWidth : 線の太さ
ストロークスタイル: 線の色
lineCap : ラインキャップ、ラインの両端の形状この値が設定されている場合、ラインはわずかに長くなります (デフォルト: butt、circle:round、square:square)
lineJoin : コーナースタイル (デフォルト: 留め継ぎ、ラウンド: ラウンド、ベベル: ベベル)
setLineDash():線を破線に変更するには、数値型の配列を渡す必要があります (配列には要素が 1 つだけあります。実線と空白は両方とも値です。配列には 2 つの要素があります: 実線)は要素 1、破線は要素 2)
lineDashOffset():点線の開始オフセットを設定します。
beginPath() : 新しいパス;

異なるスタイルで複数の線分を描画する場合は、新しいパスを開く必要があります。そうしないと、線のスタイルが互いに汚染されてしまいます。

beginPath() メソッドを使用してパスを再度開き、新しい線分のスタイルを設定します (必須)。

let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d');
ctx.moveTo(100, 50);
ctx.lineTo(290, 50);
ctx.stroke();

ctx.moveTo(100, 80.5);
ctx.lineTo(290, 80.5);
ctx.stroke();

// 虚线
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(290, 100);
ctx.setLineDash([10])
ctx.stroke();

ここに画像の説明を挿入

5. 長方形

前の線分を使用して四角形を描くことができ、canvas には四角形を直接生成するrect() メソッドも用意されています。

// 线段方式
let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d');
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.lineTo(100, 100); // 需要再设置一次起点坐标进行闭合 或者推荐使用closePath()方法
ctx.stroke();

rect() メソッド: パラメーター 1 と 2 はそれぞれ開始点 (左上隅) の座標 X と Y に対応し、パラメーター 3 と 4 は長方形の幅と高さを表します。

// rect(x, y, width, height)
ctx.rect(150, 50, 50, 99);
ctx.stroke();

ストロークRect() ; ストローク四角形; (使用法とパラメータはrect()と同じです)

fillRect() ; 四角形を塗りつぶします。

clearRect() ; 指定された領域をクリアします (キャンバス全体をクリアするには ctx.clearRect(0, 0, cvs.width, cvs.height) を使用します)。

6. ポリゴン

ポリゴンを描画するには、moveTo()、lineTo()、および closePath() の組み合わせが必要です。

7. サークル（円弧）

円を描くメソッドは arc(); (曲線を描く bezierCurveTo())

arc(x, y, r, sAngle, eAngle，counterclockwise)
// x, y 是圆心坐标
// sAngle, eAngle是开始角度 结束角度（以弧度为单位。例如 180°就写成 Math.PI ，360°写成 Math.PI * 2 ）
// counterclockwise 绘制方向，默认false(true: 逆时针，false: 顺时针)

注: beginPath() メソッドは円を描画する前に呼び出す必要があり、closePath() メソッドは描画後に呼び出す必要があります。

let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 360 * Math.PI / 180, false);
ctx.closePath(); // 不调用closePath()就可以绘制弧线
ctx.stroke();

ここに画像の説明を挿入

8. テキスト

テキストのスタイル、ストローク、塗りつぶし、配置などを設定できます。

スタイル: フォント

cxt.font = 'font-style font-variant font-weight font-size/line-height font-family'

ストローク: ストロークText()

/** 
text: 要描边的文本
x: 横坐标，文本左边要对齐的坐标
y: 纵坐标， 文本底部要对齐的坐标
maxWidth: 可选，文本最大渲染宽度，超出文本会被压缩
**/
strokeText(text, x, y, maxWidth)

塗りつぶし: fillText()構文はストロークと同じです

<canvas id="canvas"></canvas>
<script>
let cvs = document.getElementById('canvas')
let ctx = cvs.getContext('2d'); // 获取webgl上下文
ctx.font = '40px Arial'
ctx.strokeStyle = 'red' // 设置描边颜色
ctx.strokeText('hello', 100, 100)

ctx.fillStyle = 'black' // 设置填充颜色
ctx.fillText('hello', 100, 100)

</script>

ここに画像の説明を挿入

テキスト幅を計算します:measureText(text)

ctx.measureText('hello world!').width

9. 写真

画像のレンダリング、画像の幅と高さの設定、画像のキャプチャなどに使用できます。

画像をレンダリングします。

语法： 
// image: 图片对象 
// ltx: 图片左上角的横坐标位置
// lty: 图片左上角的纵坐标位置
drawImage(image, ltx, lty)

<canvas id="canvas" width="1500" height="1500"></canvas>
<script>
    let cvs = document.getElementById('canvas')
    let ctx = cvs.getContext('2d'); // 获取webgl上下文

    const image = new Image(); // 1. 创建image对象
    image.src = './微信图片_20220620163205.png'； // 2. 引入图片
    image.onload = () => {
    
     // 3. 加载图片
    	ctx.drawImage(image, 100, 100); // 使用drawImage()方法渲染
	}
</script>

画像の幅と高さを設定します。あと 2 つのパラメータを追加するだけです~

drawImage(image, ltx, lty, w, h); // w h分别表示图片宽高

**インターセプト画像:** パラメータが増え、順序が変更されました

// sx, sy, sw, sh分别表示： 开始截取的横坐标、纵坐标，截取的宽高
drawImage(image, sx, sy, sw, sh, ltx, lty, w, h)
ctx.drawImage(image, 50, 300, 300, 300, 200, 200, 200, 200);

ここに画像の説明を挿入

10. グラデーション:

線形グラデーション: createLinearGradient(x1, y1, x2, y2)

放射状グラデーション: createRadialGradient(x1, y1, r1, x2, y2, r2)

線形グラデーションを作成する手順:

a. createLinearGradient() メソッドを使用して、開始点と終了点を指定する CanvasGradient オブジェクトを作成します (直線は 2 点で決まります)。

b. CanvasGradient オブジェクトの addColorStop() メソッドを使用して、開始カラーストップを追加します。

c. CanvasGradient オブジェクトをストロークスタイル属性またはフィルスタイル属性に割り当てます。

let cvs = document.getElementById('canvas')
let ctx = cvs.getContext('2d'); // 获取canvas 平面 上下文

var gradient = ctx.createLinearGradient(0,0,200,0); // 步骤a
gradient.addColorStop(0,"green"); // 步骤b
gradient.addColorStop(1,"blue");
ctx.fillStyle = gradient; // 步骤c
ctx.fillRect(10,10,200,100);

上記は、キャンバスの基本的な構文の一部と、投影やフィルターなどの高度なゲームプレイです。

構文の詳細については、https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D を参照してください。

キャンバスを使い始める

1. キャンバスとは

2. キャンバスを使用してグラフィックを描画する手順

3. 座標系

4. ライン

5. 長方形

6. ポリゴン

7. サークル（円弧）

8. テキスト

9. 写真

10. グラデーション:

おすすめ