开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 2398|回复: 7
收起左侧

[JS例程分享] canvas中炫酷盛开的花,js+h5新特性

[复制链接]
结帖率:94% (255/272)
发表于 2017-10-23 15:58:21 | 显示全部楼层 |阅读模式   浙江省杭州市
html只有一句

<canvas></canvas>

css


body {
  background: #000;
  overflow: hidden;
}

canvas {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}



重要的是js处理


'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Scene = function () {
  function Scene() {
    var _this = this;

    _classCallCheck(this, Scene);

    this.PI = Math.PI;
    this.TAU = this.PI * 2;
    this.GOLDEN = (Math.sqrt(5) + 1) / 2;
    this.canvas = document.querySelector('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.dpr = window.devicePixelRatio;
    this.reset();
    window.addEventListener('resize', function () {
      return _this.reset();
    });
    this.loop();
  }

  Scene.prototype.reset = function reset() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.hwidth = this.width * 0.5;
    this.hheight = this.height * 0.5;
    this.canvas.width = this.width * this.dpr;
    this.canvas.height = this.height * this.dpr;
    this.ctx.scale(this.dpr, this.dpr);
    this.ctx.translate(~ ~this.hwidth, ~ ~this.hheight);
    this.ctx.globalCompositeOperation = 'lighter';
    this.tick = 320;
  };

  Scene.prototype.loop = function loop() {
    var _this2 = this;

    requestAnimationFrame(function () {
      return _this2.loop();
    });
    this.tick++;
    this.ctx.clearRect(-this.hwidth, -this.hheight, this.width, this.height);
    var count = 150;
    var angle = this.tick * -0.001;
    var amp = 0;
    for (var i = 0; i < count; i++) {
      angle += this.GOLDEN * this.TAU + Math.sin(this.tick * 0.03) * 0.001;
      amp += (i - count / 2) * 0.01 + Math.cos(this.tick * 0.015) * 1;
      var x = Math.cos(angle) * amp + Math.cos(this.tick * 0.0075) * (count - i) * 0.3;
      var y = Math.sin(angle) * amp + Math.sin(this.tick * 0.0075) * (count - i) * 0.3;
      var radius = 0.1 + i * 0.02;
      var scale = 0.1 + amp * 0.1;
      var hue = this.tick + angle / this.TAU * 0.4 + 60;
      var saturation = 90;
      var lightness = 60;
      var alpha = 0.7 + Math.cos(this.tick * 0.03 + i) * 0.3;

      this.ctx.save();
      this.ctx.translate(x, y);
      this.ctx.rotate(angle);
      this.ctx.scale(scale, 1);
      this.ctx.rotate(this.PI * 0.25);
      this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha + ')';
      this.ctx.fillRect(-radius, -radius, radius * 2, radius * 2);
      this.ctx.restore();

      this.ctx.beginPath();
      this.ctx.arc(x, y, radius * 12, 0, this.TAU);
      this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha * 0.05 + ')';
      this.ctx.fill();
    }
  };

  return Scene;
}();

var scene = new Scene();

L)GD~H{)1T0RWIYJXM9X}DI.png
RUNRQ]UZGF]5MRR6H[H.png
SF}]6NH6ZBXXW~{(DX)$VC9.png
发表于 2018-9-20 14:47:08 | 显示全部楼层   山西省太原市
必须好评,好好研究下
回复 支持 反对

使用道具 举报

结帖率:94% (255/272)

签到天数: 26 天

 楼主| 发表于 2017-10-23 19:24:33 | 显示全部楼层   浙江省杭州市

求好评。。。
回复 支持 反对

使用道具 举报

结帖率:93% (182/195)

签到天数: 12 天

发表于 2017-10-23 18:09:20 | 显示全部楼层   广东省梅州市
挺好看的   
回复 支持 反对

使用道具 举报

结帖率:94% (255/272)

签到天数: 26 天

 楼主| 发表于 2017-10-23 17:30:37 | 显示全部楼层   浙江省杭州市
luojinjing 发表于 2017-10-23 16:10
#在这里快速回复#666666666666666

回复 支持 反对

使用道具 举报

结帖率:94% (255/272)

签到天数: 26 天

 楼主| 发表于 2017-10-23 17:30:26 | 显示全部楼层   浙江省杭州市

咋样,可以玩不
回复 支持 反对

使用道具 举报

结帖率:100% (8/8)
发表于 2017-10-23 16:16:18 | 显示全部楼层   河南省周口市
看看效果理想不
回复 支持 反对

使用道具 举报

签到天数: 6 天

发表于 2017-10-23 16:10:09 | 显示全部楼层   贵州省贵阳市
#在这里快速回复#666666666666666
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 诚聘英才| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 800073686,邮箱:800073686@b.qq.com
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表