Article directory
1. I don't need to learn
CanvasAPI does not need to be learned or used, it is simply used to play.
2. Introductory case
structure.
<canvas id="app"></canvas>
Performance.
#app {
outline: solid pink 2px;
}
behavior.
app is a canvas element, and the
width and height can be set directly.
Pens are brushes that
can generate various effects.
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);
Effect:
3. Compatible spelling
Compatibility of structures:
<canvas id="app">
浏览器不支持
</canvas>
Compatibility of behavior:
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("浏览器不支持")
}