canvas简单的画布动画
本质
高频率地清除画布,然后再绘制新的图片,使之看起来就像一个动画。
关键代码
fillRect()
: 看似是绘制矩形,实则是利用了它的方法和画布是矩形这两个特性来进行画布的清除,清除上一次的全部内容以便于下一次的绘制。
源代码
window.onload = () => {
let canvas = document.getElementById('demo')
let ctx = canvas.getContext('2d')
let flag = 1 // 每一帧旋转角度(每重绘一次算一帧)
let a = 1 // 放大比例
let status = true // 判断当前需要增大图像尺寸还是缩小图像尺寸
ctx.translate(500, 300) // 把坐标中心移动到画布中心,这里的画布长1000px,宽600px
let color = false // 决定内容是白底黑线还是黑底白线
let time = setInterval(() => {
ctx.fillStyle = color === true ? "#fff" : "#000"
ctx.fillRect(-500, -300, canvas.width, canvas.height)
// 判断当前需要增大图像还是缩小图像
if (status === true) {
a = a + 0.01
} else {
a = a - 0.01
}
ctx.rotate(flag * Math.PI / 180)
// 绘制部分
ctx.strokeStyle = color === false ? "#fff" : "#000"
ctx.strokeRect(-100 * a , -100 * a, 200 * a, 200 * a)
ctx.beginPath()
ctx.strokeStyle = color === false ? "#fff" : "#000"
ctx.moveTo(0, 0)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.beginPath()
ctx.strokeStyle = color === false ? "#fff" : "#000"
ctx.moveTo(0, 0)
ctx.lineTo(-100, 100)
ctx.stroke()
// 判断是否达到最大的尺寸
if (a > 2) {
status = false
} else if (a < 1) {
status = true
}
// color = !color // 辣眼睛就注释了
}, 12) // 重绘频率
}