Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background-color:black; margin:0; overflow:hidden; }
JavaScript
const PHI = (1 + Math.sqrt(5)) / 2, // 1.618033988749895 maxGeneration = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? 5 : 6, frameDuration = 1000 / 60, duration = 3000, rotationSpeed = 0.3, totalIterations = Math.floor(duration / frameDuration), maxBaseSize = 100, baseSizeSpeed = 0.02; var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), canvasWidth = document.documentElement.clientWidth, canvasHeight = document.documentElement.clientHeight, shapes = [], sizeVariation, iteration = 0, animationDirection = 1, sizeVariationRange = .15, baseRotation = 0, baseSize = 50, c1 = 43, c1S = 1, c2 = 205, c2S = 1, c3 = 255, c3S = 1; canvas.setAttribute("width", canvasWidth); canvas.setAttribute("height", canvasHeight); function Shape(gen, x, y, size, rotation) { this.generation = gen; this.size = size; this.rotation = -rotation; this.start = { x: x, y: y }; this.end = { x_1: this.start.x + Math.cos(degToRad(this.rotation)) * this.size, y_1: this.start.y + Math.sin(degToRad(this.rotation)) * this.size, x_2: this.start.x + Math.cos(degToRad(this.rotation + 360 / 3)) * this.size, y_2: this.start.y + Math.sin(degToRad(this.rotation + 360 / 3)) * this.size, x_3: this.start.x + Math.cos(degToRad(this.rotation + 360 / 3 * 2)) * this.size, y_3: this.start.y + Math.sin(degToRad(this.rotation + 360 / 3 * 2)) * this.size }; this.init(); } Shape.prototype.init = function() { if (this.generation < maxGeneration) { var gen = this.generation + 1, newSize = this.size * sizeVariation, newRotation = this.rotation; shapes.push( new Shape(gen, this.end.x_1, this.end.y_1, newSize, newRotation) ); shapes.push( new Shape(gen, this.end.x_2, this.end.y_2, newSize, newRotation) ); shapes.push( new Shape(gen, this.end.x_3, this.end.y_3, newSize, newRotation) ); } this.draw(); }; Shape.prototype.draw = function() { ctx.beginPath(); ctx.moveTo(this.start.x, this.start.y); ctx.lineTo(this.end.x_1, this.end.y_1); ctx.moveTo(this.start.x, this.start.y); ctx.lineTo(this.end.x_2, this.end.y_2); ctx.moveTo(this.start.x, this.start.y); ctx.lineTo(this.end.x_3, this.end.y_3); //ctx.closePath(); ctx.strokeStyle = "rgba(" + c1 + "," + c2 + "," + c3 + "," + 1 / this.generation / 5 + ")"; ctx.stroke(); //ctx.fill(); }; function animate() { //ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(0,0,0,.1)"; ctx.fillRect(0, 0, canvasWidth, canvasHeight); ctx.globalCompositeOperation = "lighter"; shapes = []; shapes.push( new Shape(0, canvasWidth / 2, canvasHeight / 2, baseSize, baseRotation) ); changeColor(); iteration++; if (baseSize < maxBaseSize) baseSize += baseSizeSpeed; baseRotation += rotationSpeed; sizeVariation = easeInOutSine( iteration, 1 - sizeVariationRange * animationDirection, sizeVariationRange * 2 * animationDirection, totalIterations ); if (iteration >= totalIterations) { iteration = 0; animationDirection *= -1; } requestAnimationFrame(animate); } function degToRad(deg) { return Math.PI / 180 * deg; } function easeInOutSine( currentIteration, startValue, changeInValue, totalIterations ) { return ( changeInValue / 2 * (1 - Math.cos(Math.PI * currentIteration / totalIterations)) + startValue ); } function changeColor() { if (c1 == 0 || c1 == 255) c1S *= -1; if (c2 == 0 || c2 == 255) c2S *= -1; if (c3 == 0 || c3 == 255) c3S *= -1; c1 += 1 * c1S; c2 += 1 * c2S; c3 += 1 * c3S; } ctx.globalCompositeOperation = "lighter"; animate(); window.addEventListener("resize", function() { canvasWidth = document.documentElement.clientWidth; canvasHeight = document.documentElement.clientHeight; canvas.setAttribute("width", canvasWidth); canvas.setAttribute("height", canvasHeight); ctx.strokeStyle = "rgba(66,134,240,.3)"; ctx.globalCompositeOperation = "lighter"; });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>动画线分形-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号