一只股票分析全面分析
140行代碼實現一個逼真的大雪紛飛的效果
2019-12-27 16:21:40來源:閱讀:1

本地新建一個html文件,把下列代碼復制粘貼進去,保存,用瀏覽器打開:<html>

<style>

html, body {

margin: 0;

padding: 0;

background: #000;

}

</style>

<script>

// https://codepen.io/pimskie/pen/jEVPNx


function 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 canvas

ctx.save();

ctx.setTransform(1, 0, 0, 1, 0, 0);

ctx.clearRect(0, 0, windowW, windowH);

ctx.restore();

// loop of hell

while (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>


140行代碼實現一個逼真的大雪紛飛的效果


140行代碼實現一個逼真的大雪紛飛的效果

最后效果如圖,相當酷炫:

140行代碼實現一個逼真的大雪紛飛的效果


推薦閱讀:葉紫

版權和免責申明

吉林信息港所有文字、圖片、視頻、音頻等資料均來自互聯網,不代表本站贊同其觀點,本站亦不為其版權負責。相關作品的原創性、文中陳述文字以及內容數據龐雜本站無法一一核實,如果您發現本網站上有侵犯您的合法權益的內容,請聯系我們,本網站將立即予以刪除!

{ganrao}