html5 canvas雪花缓缓飘落动画特效

html5 canvas雪花缓缓飘落动画特效

添加时间:2020-12-30 07:09:37
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:canvas
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款漂亮的html5 canvas雪花缓缓飘落动画特效,各种形状的雪花在空中慢慢落下的动画效果。
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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:html5 canvas雪花缓缓飘落动画特效

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.087869s