Directorio de artículos
1. Lectura de archivos
Las transformaciones de lienzo y los pinceles se pueden archivar y leer.
Es un proceso de empujar y abrir la pila, escribir una vez y leer una vez. Releer requiere reescribir.
La lectura del archivo es solo el estado, y la pintura específica aún debe volver a pintarse.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app {
outline: solid pink 2px;
}
</style>
</head>
<body>
<canvas id="app">
浏览器不支持
</canvas>
<button onclick="paint(1.1)">放大</button>
<button onclick="paint(0.9)">缩小</button>
<button onclick="pen.save()">保存</button>
<button onclick="pen.restore();pen.save();paint()">恢复</button>
<script>
var app = document.getElementById('app');
app.width = 300;
app.height = 300;
var pen = null;
if (app.getContext) {
pen = app.getContext('2d');
paint()
} else {
console.log("浏览器不支持")
}
function paint(number) {
if (number) {
pen.scale(number, number);
}
pen.clearRect(0, 0, 300, 300)
pen.fillRect(0, 0, 100, 100)
}
</script>
</body>
</html>
Efecto:
2. Transformar
mover
traducir (x, y)
Rotar
(centrado en 0,0)
rotar (ángulo)
escala
escala(x, y)
矩阵
transform(a, b, c, d, e, f)
setTransform(a, b, c, d, e, f)
resetTransform()
Caso: Cargando
const app = document.getElementById('app');
app.width = 300;
app.height = 300;
if (app.getContext) {
const pen = app.getContext('2d');
pen.translate(150, 150)
setInterval(() => {
drawA(pen)
}, 100)
} else {
console.log("浏览器不支持")
}
function drawA(pen) {
pen.clearRect(-300, -300, 600, 600)
pen.rotate(Math.PI / 6);
for (let i = 0; i < 12; i++) {
pen.rotate(Math.PI / 6);
pen.globalAlpha = 1 / 12 * i;
pen.fillRect(0, -5, 150, 10)
}
}
Efecto:
