canvas绘制简单的霓虹灯效果

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

canvas简单动画分为三个步骤：

1、清除画布区域的内容；

2、重绘；

3、执行requestAnimationFrame();

这个霓虹灯效果的demo，我没有用requestAnimationFrame();而是用的传统的setInterval;主要思路：画圆，画一堆圆，在一定时间间隔后，清除画布，再画一堆圆。

<canvas id="canvas">该浏览器不支持canvas元素</canvas>

//页面加载完完成之后执行

window.onload = function (){

            var canvas = document.getElementById('canvas');

            canvas.width = 1200;

            canvas.height = 800;

            canvas.style.border = '1px solid #ddd';

            canvas.style.background = "#000";

            var context = canvas.getContext('2d');

            //1s后刷新页面重绘

            setInterval(function(){

               context.clearRect(0,0,canvas.width,canvas.height);

               render(context);

            }, 1000)

        }

        
        //定义画圆的函数，用随机数取圆心的坐标，及各种不同的颜色的变化

        function render(cxt){

            for (var i = 0; i < 50; i++) {

                var bx = Math.random() * canvas.width;

                var by = Math.random() * canvas.height;

                cxt.fillStyle = 'rgba( '+(parseInt(255*Math.random()))+', '+(parseInt(255*Math.random()))+', '+(parseInt(255*Math.random()))+', '+(1-(i+10)/40)+')';

                cxt.beginPath();

                cxt.arc(bx,by,20,0,2*Math.PI);

                cxt.closePath();

                cxt.fill();

            }

        }