HTML5+Canvas发光粒子文字动画特效

1、新建html文档。

2、书写hmtl代码。<div class = "control" style = "position:absolute"><input type = "text" value = "百度经验" id = "t"><button onclick = "changeText(t.value)"> change </button></div>

3、书写css代码。<style>body, html { margin: 0; width: 100%; overflow: hidden; }canvas { width: 100%; }.control { position: absolute; }.control input { border: 0; margin: 0; padding: 15px; outline: none; text-align: center; }.control button { border: 0; margin: 0; padding: 15px; outline: none; background: #333; color: #fff; }.control button:focus, .control button:hover { background: #222 }</style>

4、书写并添加js代码。<script>var can = document.createElement("canvas");document.body.appendChild(can);var ctx = can.getContext('2d');function resize(){ can.width = window.innerWidth; can.height = window.innerHeight;}const max_radius = 3;const min_radius = 1;const drag = 50;window.onresize = function(){ resize();};function cfill(){ ctx.fillStyle = "#000"; ctx.fillRect(0,0,can.width,can.height); ctx.fill();}var mouse = { x:-1000, y:-1000};

5、代码整体结构。

6、查看效果。