Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin: 0; background: #fff; } canvas { height: auto; max-width: 100%; vertical-align: middle; }
JavaScript
'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var defaults = { width: window.innerWidth, height: window.innerHeight, scale: 50, opacity: 0.5 }; var BarnsleyFern = function() { function BarnsleyFern(element, options) { _classCallCheck(this, BarnsleyFern); Object.assign(this, defaults, options); this.element = element; this.init(); this.update(options); } BarnsleyFern.prototype.init = function init() { var canvas = this.canvas = document.querySelector(this.element); var context = this.context = this.canvas.getContext('2d'); var width = canvas.width = this.width; var height = canvas.height = this.height; context.translate(width / 2, height); }; BarnsleyFern.prototype.getRule = function getRule(rules) { var rulesLenght = rules.length; var random = Math.random(); var i = undefined; for (i = 0; i < rulesLenght; i++) { var rule = rules[i]; if (random < rule.weight) { return rule; } random -= rule.weight; } }; BarnsleyFern.prototype.render = function render(options) { var scale = this.scale; var opacity = this.opacity; var x = Math.random(); var y = Math.random(); for (var i = 0; i < 500; i++) { var rule = this.getRule(this.rules); var x1 = x * rule.a + y * rule.b + rule.tx; var y1 = x * rule.c + y * rule.d + rule.ty; x = x1; y = y1; this.context.fillRect(x * scale, -y * scale, opacity, opacity); } }; BarnsleyFern.prototype.update = function update(options) { this.render(options); requestAnimationFrame(this.update.bind(this)); }; return BarnsleyFern; }(); // https://en.wikipedia.org/wiki/Barnsley_fern var rules = [{ a: 0.85, b: 0.04, c: -0.04, d: 0.85, tx: 0, ty: 1.6, weight: 0.65 }, { a: -0.15, b: 0.28, c: 0.26, d: 0.24, tx: 0, ty: 0.44, weight: 0.07 }, { a: 0.2, b: -0.26, c: 0.23, d: 0.22, tx: 0, ty: 1.6, weight: 0.07 }, { a: 0, b: 0, c: 0, d: 0.16, tx: 0, ty: 0, weight: 0.21 }]; new BarnsleyFern('.canvas', { rules: rules });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas树叶-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号