140行代码实现一个逼真的大雪纷飞的效果
生活随笔
收集整理的這篇文章主要介紹了
140行代码实现一个逼真的大雪纷飞的效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本地新建一個(gè)html文件，把下列代碼復(fù)制粘貼進(jìn)去，保存，用瀏覽器打開(kāi)：
<html> <style> html, body {margin: 0;padding: 0;background: #000; } </style> <script> // https://codepen.io/pimskie/pen/jEVPNxfunction myload(){var canvas = document.querySelector('.snow'),ctx = canvas.getContext('2d'),windowW = window.innerWidth,windowH = window.innerHeight,numFlakes = 200,flakes = [];function Flake(x, y) {var maxWeight = 5,maxSpeed = 3;this.x = x;this.y = y;this.r = randomBetween(0, 1);this.a = randomBetween(0, Math.PI);this.aStep = 0.01;this.weight = randomBetween(2, maxWeight);this.alpha = (this.weight / maxWeight);this.speed = (this.weight / maxWeight) * maxSpeed;this.update = function() {this.x += Math.cos(this.a) * this.r;this.a += this.aStep;this.y += this.speed;}}function init() {var i = numFlakes,flake,x,y;while (i--) {x = randomBetween(0, windowW, true);y = randomBetween(0, windowH, true);flake = new Flake(x, y);flakes.push(flake);}scaleCanvas();loop(); }function scaleCanvas() {canvas.width = windowW;canvas.height = windowH; }function loop() {var i = flakes.length,z,dist,flakeA,flakeB;// clear canvasctx.save();ctx.setTransform(1, 0, 0, 1, 0, 0);ctx.clearRect(0, 0, windowW, windowH);ctx.restore();// loop of hellwhile (i--) {flakeA = flakes[i];flakeA.update();/*for (z = 0; z < flakes.length; z++) {flakeB = flakes[z];if (flakeA !== flakeB && distanceBetween(flakeA, flakeB) < 150) { ctx.beginPath();ctx.moveTo(flakeA.x, flakeA.y);ctx.lineTo(flakeB.x, flakeB.y);ctx.strokeStyle = '#444444';ctx.stroke();ctx.closePath();}}*/ctx.beginPath();ctx.arc(flakeA.x, flakeA.y, flakeA.weight, 0, 2 * Math.PI, false);ctx.fillStyle = 'rgba(255, 255, 255, ' + flakeA.alpha + ')';ctx.fill();if (flakeA.y >= windowH) {flakeA.y = -flakeA.weight;} }requestAnimationFrame(loop); }function randomBetween(min, max, round) {var num = Math.random() * (max - min + 1) + min;if (round) {return Math.floor(num);} else {return num;} }function distanceBetween(vector1, vector2) {var dx = vector2.x - vector1.x,dy = vector2.y - vector1.y;return Math.sqrt(dx*dx + dy*dy); }init();} </script> <body onload = "myload()"> <canvas class="snow"></canvas> </body> </html>
最后效果如圖，相當(dāng)酷炫：
要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":
總結(jié)
以上是生活随笔為你收集整理的140行代码实现一个逼真的大雪纷飞的效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 炉石传说酒馆战棋新英雄布莱恩铜须怎么玩
- 下一篇： SAP Cloud Platform上的