首页
前端开发
HTML5
HTML5Canvas闪电动画

HTML5Canvas闪电动画

0 次浏览 0 条评论
zip
zip

闪电效果的 Canvas 动画，互动性挺强，视觉冲击感也还不错。靠的是 HTML5 的配合 JavaScript 搞出来的动态路径变换，思路简单但效果蛮酷。代码逻辑比较直给：监听鼠标、画折线路径、用hsl做色彩变化，每帧刷新清画布。想玩点不一样的动画，这个挺值得试试。

canvas 的闪电动画，响应鼠标移动，整个过程挺丝滑。先搞个，加个边框，基本样式别忘了：

canvas {
  border: 1px solid #000;
}

核心逻辑写在demo.js里，用getContext('2d')拿到渲染上下文。后面每次鼠标移动，就调用drawLightning函数，根据当前位置画出不同的闪电路径，色彩跟着时间变换：

canvas.addEventListener('mousemove', function(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  drawLightning(x, y);
});

要让动画动起来，记得加上requestAnimationFrame，每一帧都清画布，再重绘中心点那一下，算是个基础背景闪电：

(function animate() {
  ctx.clearRect(0, canvas.width, canvas.height);
  drawLightning(canvas.width / 2, canvas.height / 2);
  requestAnimationFrame(animate);
})();

想让闪电更夸张点？可以调整折线路径的随机范围；颜色不够跳？hue的步进值也能手动改。，挺适合拿来练手，也适合做互动展示。如果你在搞网页动画设计，可以把这段代码改成更复杂的天气效果。

zip 文件大小：1.36KB