帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 带刺的花 动画效果
带刺的花 动画效果
浏览:687次
-
评论:0次
-
发布时间:2018-08-04
Html
Css
Js
body { background:#000; overflow:hidden; } canvas { height:100%; left:0; position:absolute; top:0; width:100%; }
var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 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(); } _createClass(Scene, [{ key: 'reset', value: 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; } }, { key: 'loop', value: 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();
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>带刺的花 动画效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:运用canvas
利用canvas绘制动画
jQuery按时间排序效果
阿里云云栖大会canvas炫酷动画效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
687
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值