html雪花效果图,html5 canvas漂亮的雪花飘落动画特效 | 您所在的位置:网站首页 › 雪花飘落动画效果分析 › html雪花效果图,html5 canvas漂亮的雪花飘落动画特效 |
特效描述:html5 canvas 雪花飘落 动画特效。html5 canvas绘制空中雪花缓缓飘落动画特效 代码结构 1. 引入JS 2. HTML代码 var flakes = []; var save = []; var xMod = 0; var singleMode = false; var rate = .2; function Flake(size, x, y){ this.x = x?x:(random()*1.5 - .25)*width; this.y = y?y:-size; this.speed = size/20; this.selected = false; this.height = floor(size/2); this.width = floor(this.height*1.732); this.g = createGraphics(this.width, this.height); init(this.g, this.width, this.height); this.tick = function(){ this.y += this.speed; this.x += xMod*this.speed/4; } this.render = function(){ push(); translate(this.x, this.y); for (var i = 0; i < 6; i++){ push(); rotate(PI*i/3); image(this.g, 0, 0); scale(-1, 1); image(this.g, 0, 0); pop(); } pop(); } } function init(g, w, h){ g.background(0); g.noStroke(); var s = w/60 + .5; g.fill(170*s, 220*s, 255*s); g.triangle(0, 0, w, 0, w, h); g.fill(0); g.triangle(w, 0, w, h, w*.8, h); g.triangle(w/2, h/2, w, h*random(), w, h); for (var i =0; i < 10; i++){ g.triangle(random()*w, random()*h, random()*w, random()*h, random()*w, random()*h); } g.loadPixels(); for (var i = 0; i < w; i++){ for (var j = 0; j < h; j++){ var p = (i+j*w)*4; g.pixels[p+3] = g.pixels[p+2]; } } g.updatePixels(); } function setup(){ createCanvas(); colorMode(HSB, 360, 100, 100, 100); ellipseMode(CENTER); textAlign(LEFT, TOP) textSize(20); windowResized(); } function draw(){ background(200, 100, 10); noStroke(); xMod = sin(frameCount/500); for (var i = 0; i < flakes.length; i++){ var f = flakes[i]; if (!singleMode) f.tick(); f.render(); if (f.y - f.width > height){ flakes.splice(i, 1); i--; } } if (!singleMode && random() < .2){ flakes.push(new Flake(pow(random(), 2)*50 + 15)); } if (singleMode){ push(); fill(100); text("space: create a new snowflake\n" + "other: exit", 10, 10); pop(); } } function keyPressed(){ if (keyCode == 32){ if (!singleMode) save = flakes; flakes = []; flakes.push(new Flake(min(width, height)*.5, width/2, height/2)); singleMode = true; } else { if (singleMode) flakes = save; singleMode = false; } } function windowResized() { resizeCanvas(windowWidth, windowHeight); pixelDensity(1); flakes = []; flakes.push(new Flake(50)); } |
CopyRight 2018-2019 实验室设备网 版权所有 |