android 清空canvas部分内容_Canvas动画

1：Canvas动画原理

快速切换的静态画面。

2：基本步骤

• 绘制 - 清空 - 绘制 - 清空 - 绘制 ...

3：控制函数

• setTimeout
• setInterval
• requestAnimationFrame

4：四种运动

线性运动

const canvas = document.getElementById('canvas'); /* 获得 2d 上下文对象 */ const ctx = canvas.getContext('2d'); let radialGradient; let distance = -50; const speed = 5; const draw = (axisX) => { /* 清空画布(或部分清空) */ ctx.clearRect(0, 0, 600, 600); radialGradient = ctx.createRadialGradient(distance, 300, 10, distance, 300, 50); radialGradient.addColorStop(0, "#FFFFFF"); radialGradient.addColorStop(1, "#EA7F26"); ctx.fillStyle = radialGradient; ctx.beginPath(); ctx.moveTo(distance, 300); ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false); ctx.fill();  distance = distance + speed;  if (distance > 650)