canvas多彩粒子星空背景

HTML5 canvas 实现多颜色粒子星空页面背景，喜欢的可以收藏。自己可以定义颜色，粒子透明度，粒子数量，粒子大小。

预览效果图如下：

1.获取canvas上下文，并且动态设置canvas尺寸和屏幕大小一样。

var canvas = document.getElementById('canvas')
    var viewW = window.innerWidth
    var viewH = window.innerHeight

    canvas.width = viewW
    canvas.height = viewH
    var ctx = canvas.getContext('2d')
    ctx.save()

2.定义粒子参数。
number: 粒子数量
maxDot: 粒子最大半径
array: 记录每个粒子的属性

var dots = {
   number: 300,
   maxDot: 30, 
   array: []
}

3.定义别的参数。
isOne: 是否是第一次画
step: 每次运行的距离

var isOne = true
var step = 0.3
var x = 0
var y = 0
var x1 = 0
var y1 = 0

4.生成随机颜色。

function generateRandomColors() {
        var color1 = Math.random() * 255 || 1,
            color2 = Math.random() * 255 || 1,
            color3 = Math.random() * 255 || 1,
            color4 = Math.random() * 1 || 0.1;
        return `rgba(${color1},${color2},${color3},${color4})`
    }

5.画粒子和线条。

function drawDots() {
        ctx.clearRect(0, 0, viewW, viewH)
        ctx.fillStyle = '#000'
        ctx.fillRect(0, 0, viewW, viewH)

        for (var i = 0; i < dots.number; i++) {
            var dotR,
                dotX,
                dotY,
                dotC,
                dot_X = 0.3,
                dot_Y = 0;
            if (isOne) {
                dotR = Math.round(Math.random() * dots.maxDot) || 1;
                dotX = Math.round(Math.random() * viewW);
                dotY = Math.round(Math.random() * viewH);
                dotC = generateRandomColors();
                if (Math.round(Math.random()) == 1) {
                    dot_X = 0.3
                } else {
                    dot_X = -0.3
                }
                if (Math.round(Math.random()) == 1) {
                    dot_Y = 0.3
                } else {
                    dot_Y = -0.3
                }
                dots.array.push({
                    dotR,
                    dotX,
                    dotY,
                    dotC,
                    dot_X,
                    dot_Y
                })
                if (i == 0) {
                    x = dotX;
                    y = dotY;
                }
                if (i == 2) {
                    x1 = dotX;
                    y1 = dotY;
                }

            } else {

                if (dots.array[i].dotX + dots.array[i].dot_X > viewW) {
                    dots.array[i].dot_X = -0.3
                }
                if (dots.array[i].dotX + dots.array[i].dot_X < 0) {
                    dots.array[i].dot_X = 0.3
                }
                if (dots.array[i].dotY + dots.array[i].dot_Y > viewH) {
                    dots.array[i].dot_Y = -0.3
                }
                if (dots.array[i].dotY + dots.array[i].dot_Y < 0) {
                    dots.array[i].dot_Y = 0.3
                }
                dots.array[i].dotX += dots.array[i].dot_X
                dots.array[i].dotY += dots.array[i].dot_Y
                dotX = dots.array[i].dotX;
                dotY = dots.array[i].dotY;
                dotR = dots.array[i].dotR;
                dotC = dots.array[i].dotC;
                ctx.beginPath();
                ctx.fillStyle = dotC;
                ctx.arc(dotX, dotY, dotR, 0, Math.PI * 2);
                ctx.fill()
                if (Math.abs(x - dots.array[i].dotX) < 500 && Math.abs(y - dots.array[i].dotY) < 500) {
                    ctx.strokeStyle = dotC
                    ctx.moveTo(x, y)
                    ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
                    ctx.stroke()
                }
                if (Math.abs(x1 - dots.array[i].dotX) < 200 && Math.abs(y1 - dots.array[i].dotY) < 200) {
                    ctx.strokeStyle = dotC
                    ctx.moveTo(x1, y1)
                    ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
                    ctx.stroke()
                }
            }
        }

        if (isOne) {
            isOne = false
        }
        ctx.restore()
        requestAnimationFrame(drawDots)
    }

源码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>粒子</title>
  7     <style>
  8     * {
  9         padding: 0;
 10         margin: 0;
 11         overflow: hidden;
 12     }
 13     </style>
 14 </head>
 15 
 16 <body>
 17     <canvas id="canvas"></canvas>
 18     <script>
 19     var canvas = document.getElementById('canvas')
 20     var viewW = window.innerWidth
 21     var viewH = window.innerHeight
 22 
 23     canvas.width = viewW
 24     canvas.height = viewH
 25     var ctx = canvas.getContext('2d')
 26     ctx.save()
 27     // 原型粒子对象参数
 28     var dots = {
 29         number: 300,
 30         maxDot: 30,
 31         array: []
 32     }
 33     var isOne = true
 34     var step = 0.3
 35     var x = 0
 36     var y = 0
 37     var x1 = 0
 38     var y1 = 0
 39     drawDots()
 40     
 41     // 画粒子
 42     function drawDots() {
 43         ctx.clearRect(0, 0, viewW, viewH)
 44         ctx.fillStyle = '#000'
 45         ctx.fillRect(0, 0, viewW, viewH)
 46 
 47         for (var i = 0; i < dots.number; i++) {
 48             var dotR,
 49                 dotX,
 50                 dotY,
 51                 dotC,
 52                 dot_X = 0.3,
 53                 dot_Y = 0;
 54             if (isOne) {
 55                 dotR = Math.round(Math.random() * dots.maxDot) || 1;
 56                 dotX = Math.round(Math.random() * viewW);
 57                 dotY = Math.round(Math.random() * viewH);
 58                 dotC = generateRandomColors();
 59                 if (Math.round(Math.random()) == 1) {
 60                     dot_X = 0.3
 61                 } else {
 62                     dot_X = -0.3
 63                 }
 64                 if (Math.round(Math.random()) == 1) {
 65                     dot_Y = 0.3
 66                 } else {
 67                     dot_Y = -0.3
 68                 }
 69                 dots.array.push({
 70                     dotR,
 71                     dotX,
 72                     dotY,
 73                     dotC,
 74                     dot_X,
 75                     dot_Y
 76                 })
 77                 if (i == 0) {
 78                     x = dotX;
 79                     y = dotY;
 80                 }
 81                 if (i == 2) {
 82                     x1 = dotX;
 83                     y1 = dotY;
 84                 }
 85 
 86             } else {
 87 
 88                 if (dots.array[i].dotX + dots.array[i].dot_X > viewW) {
 89                     dots.array[i].dot_X = -0.3
 90                 }
 91                 if (dots.array[i].dotX + dots.array[i].dot_X < 0) {
 92                     dots.array[i].dot_X = 0.3
 93                 }
 94                 if (dots.array[i].dotY + dots.array[i].dot_Y > viewH) {
 95                     dots.array[i].dot_Y = -0.3
 96                 }
 97                 if (dots.array[i].dotY + dots.array[i].dot_Y < 0) {
 98                     dots.array[i].dot_Y = 0.3
 99                 }
100                 dots.array[i].dotX += dots.array[i].dot_X
101                 dots.array[i].dotY += dots.array[i].dot_Y
102                 dotX = dots.array[i].dotX;
103                 dotY = dots.array[i].dotY;
104                 dotR = dots.array[i].dotR;
105                 dotC = dots.array[i].dotC;
106                 ctx.beginPath();
107                 ctx.fillStyle = dotC;
108                 ctx.arc(dotX, dotY, dotR, 0, Math.PI * 2);
109                 ctx.fill()
110                 if (Math.abs(x - dots.array[i].dotX) < 500 && Math.abs(y - dots.array[i].dotY) < 500) {
111                     ctx.strokeStyle = dotC
112                     ctx.moveTo(x, y)
113                     ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
114                     ctx.stroke()
115                 }
116                 if (Math.abs(x1 - dots.array[i].dotX) < 200 && Math.abs(y1 - dots.array[i].dotY) < 200) {
117                     ctx.strokeStyle = dotC
118                     ctx.moveTo(x1, y1)
119                     ctx.lineTo(dots.array[i].dotX, dots.array[i].dotY)
120                     ctx.stroke()
121                 }
122             }
123         }
124 
125         if (isOne) {
126             isOne = false
127         }
128         ctx.restore()
129         requestAnimationFrame(drawDots)
130     }
131     // 生成随机颜色
132     function generateRandomColors() {
133         var color1 = Math.random() * 255 || 1,
134             color2 = Math.random() * 255 || 1,
135             color3 = Math.random() * 255 || 1,
136             color4 = Math.random() * 1 || 0.1;
137         return `rgba(${color1},${color2},${color3},${color4})`
138     }
139     </script>
140 </body>
141 
142 </html>

View Code

posted @ 2019-07-09 17:31 肖秋雄阅读(1243) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

肖秋雄

Eddy`Blog、Fingertip dancer、Web full stack programmer。
wechat：17512053075，github:https://github.com/xiaoqiuxiong。

canvas多彩粒子星空背景

公告

肖秋雄

Eddy`Blog、Fingertip dancer、Web full stack programmer。 wechat：17512053075，github:https://github.com/xiaoqiuxiong。

canvas多彩粒子星空背景

公告

Eddy`Blog、Fingertip dancer、Web full stack programmer。
wechat：17512053075，github:https://github.com/xiaoqiuxiong。