可喜可贺！庆祝电脑起死回生，庆祝一天好过一天。深夜给电脑安装了开发插件，第二天莫名死机，问了好多人都说主板坏掉了，需要重装系统。我先是对着 宾夕法尼亚大学 的方向拜了拜，又是一番操作，终于唤醒了老伙计度假的心。
写一个Canvas 动画送给你们，十五的月亮十六圆，多给家人一些陪伴。
今晚我会出一期Canvas 动画详细教程，如果你欣赏我的动画，可以添加收藏，请查看我的置顶文章，我将不胜感激。
请看源码：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Canvas 网状花环</title>
<style> html, body { margin: 0; overflow: hidden; } </style>
</head>
<body>
<canvas id="canvas" width="100%" height="100%">
</body>
<script> var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); var mouseX = 0; var mouseY = 0; var a = 0.2; var t = 0; var aStep = Math.PI * 0.01; var globalHue = 0; init(); function init() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener("mousemove", e => { mouseX = e.clientX; mouseY = e.clientY; }); update(); } function update() { requestAnimationFrame(update); var time = performance.now() / 60; // do stuff here a = Math.sin(2 - time * 0.0001); t = Math.sin(2 + time * 0.03); //aStep = (Math.sin(time * 0.01) + 1.5) * 0.25 aStep = Math.PI * (0.375 + Math.sin(time * 0.001) * 0.125); globalHue += 10; draw(); } function draw() { // clear canvas ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, canvas.width, canvas.height); // line var cx = window.innerWidth / 2; var cy = window.innerHeight / 2; var x, y, px, py; var radius = 0,pradius = 0; var totalAngle = Math.PI * 200; for (var theta = 0; theta < totalAngle; theta += aStep) { pradius = radius; radius = (t + Math.pow(2, Math.cos(theta * a))) * 200; px = x; py = y; x = cx + Math.cos(theta) * radius; y = cy + Math.sin(theta) * radius; if (theta > 0) { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(px, py); var dx = x - px; var dy = y - py; var lineSize = Math.sqrt(dx * dx + dy * dy); var r = pradius + (radius - pradius) / 2; var hue = globalHue + theta / Math.PI * 180; ctx.strokeStyle = "hsl(" + hue + ", 100%, 50%)"; //ctx.lineWidth=clamp(map(r, -200, 200, 0.25, 2), 0.25, 10); ctx.lineWidth = .5; ctx.stroke(); ctx.closePath(); } } } function map(value, start1, stop1, start2, stop2) { return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); } function clamp(value, min, max) { return value < min ? min : value > max ? max : value; } </script>
</html>
无论是Canvas 还是别的，前端的学习总是妙趣横生，只要思想在不断进步，技术就会一次次的突破。如果你学习过Canvas ，你会更加了解这段代码的神奇，送给你，远道而来的求学者。
推荐阅读：
线条动画
怦然心动
阿波罗的轻语
游动的花花肠子
V3.14激流勇进
