html5 canvas雪花缓缓飘落动画特效免费下载

一款漂亮的html5 canvas雪花缓缓飘落动画特效,各种形状的雪花在空中慢慢落下的动画效果。

JS代码

<script> 
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)); 
}</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录