キャンバス-Day1、エントリーケース

1.学ぶ必要はありません

CanvasAPIは、学習または使用する必要はなく、単に再生するために使用されます。

2.紹介ケース

構造。

<canvas id="app"></canvas>

パフォーマンス。

#app {
    
    
	outline: solid pink 2px;
}

行動。

appはcanvas要素であり、
幅と高さを直接設定できます。

ペンは、
さまざまな効果を生み出すことができるブラシです。

const app = document.getElementById('app');
app.width = 300;
app.height = 300;

const pen = app.getContext('2d');
pen.fillStyle = 'green';
pen.fillRect(0, 0, 300, 300);
pen.fillStyle = 'red';
pen.fillRect(0, 0, 100, 100);

効果：

3.互換性のあるスペル

構造の互換性：

<canvas id="app">
浏览器不支持
</canvas>

動作の互換性：

const app = document.getElementById('app');
app.width = 300;
app.height = 300;

if (app.getContext) {
    
    
	const pen = app.getContext('2d');
	pen.fillStyle = 'green';
	pen.fillRect(0, 0, 300, 300);
	pen.fillStyle = 'red';
	pen.fillRect(0, 0, 100, 100);
} else {
    
    
	console.log("浏览器不支持")
}