Directorio de artículos
1. No necesito aprender
CanvasAPI no necesita aprenderse o usarse, simplemente se usa para jugar.
2. Caso introductorio
estructura.
<canvas id="app"></canvas>
Rendimiento.
#app {
outline: solid pink 2px;
}
conducta.
app es un elemento de lienzo, y el
ancho y el alto se pueden configurar directamente.
Los bolígrafos son pinceles que
pueden generar varios efectos.
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);
Efecto:
3. Ortografía compatible
Compatibilidad de estructuras:
<canvas id="app">
浏览器不支持
</canvas>
Compatibilidad de comportamiento:
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("浏览器不支持")
}