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();
            }    
        }

运行结果：每个1s变换一次，就类似于一个霓虹灯效果一样。。。。。。

 

转载于:https://www.cnblogs.com/layaling/p/9224365.html