Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { margin: 0; padding: 0; } canvas { display: block; }
JavaScript
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var BezierCurve = (function() { 'use strict'; var width, height, canvas, ctx, points; function init(size, cnvs) { width = size.width; height = size.height; canvas = cnvs; ctx = canvas.getContext('2d'); points = generatePoints(width / 3, width / 15); canvas.width = width; canvas.height = height; ctx.fillStyle = '#1d1f20'; } function render() { ctx.fillRect(0, 0, width, height); renderBezier(ctx); } function renderBezier(ctx) { var radius, point, nextPoint, ctrlPoint, i, len; radius = 3; ctrlPoint = {}; ctx.save(); ctx.lineWidth = 2; ctx.strokeStyle = '#fff'; ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y2); for (i = 0, len = points.length - 1; i < len; i += 1) { point = points[i]; nextPoint = points[i + 1]; ctrlPoint.x = (point.x + nextPoint.x) / 2; ctrlPoint.y = (point.y + nextPoint.y) / 2; ctx.quadraticCurveTo(point.x, point.y, ctrlPoint.x, ctrlPoint.y); } ctx.quadraticCurveTo( points[points.length - 1].x, points[points.length - 1].y, (points[points.length - 1].x + points[points.length - 1].x) / 2, (points[points.length - 1].y2 + points[points.length - 1].y2) / 2 ); ctx.stroke(); for (i = 0, len = points.length; i < len; i += 1) { point = points[i]; nextPoint = points[i + 1]; point.vx += (point.targetX - point.x) * point.speed; point.vy += (point.targetY - point.y) * point.speed; point.vx *= point.gravity; point.vy *= point.gravity; point.x += point.vx; point.y += point.vy; point.y2 += point.vy; if (i !== len - 1) { // direct curves ctx.lineWidth = 0.3; ctx.strokeStyle = 'rgba(255,255,255,0.20)'; ctx.beginPath(); ctx.moveTo(point.x, point.y2); ctx.quadraticCurveTo( nextPoint.x, nextPoint.y, point.x + (nextPoint.x - point.x), point.y2 + (nextPoint.y2 - point.y2) ); ctx.stroke(); ctx.closePath(); // direct lines ctx.lineWidth = 0.25; ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.beginPath(); ctx.moveTo(point.x, point.y2); ctx.lineTo(nextPoint.x, nextPoint.y2); ctx.closePath(); ctx.stroke(); } ctx.fillStyle = 'rgba(255,255,255,0.05)'; ctx.beginPath(); ctx.arc(point.x, point.y2, radius * 5, 0, Math.PI * 2, true); ctx.fill(); ctx.fillStyle = '#f39c12'; ctx.beginPath(); ctx.arc(point.x, point.y2, radius * 2, 0, Math.PI * 2, true); ctx.fill(); ctx.fillStyle = '#f1c40f'; ctx.beginPath(); ctx.arc(point.x, point.y2, radius, 0, Math.PI * 2, true); ctx.fill(); } ctx.restore(); } function generatePoints(range, spacing) { var x, y, point, points, yRange, offset yRange = height / 2; points = []; for (x = width / 2 - range; x < width / 2 + range; x += spacing) { offset = Math.random() * height / 3.5 - height / 7; y = height / 2 - yRange / 2 + Math.random() * yRange; point = { x: x + offset, y: y + offset * 2, y2: y + offset, targetX: x, targetY: y, vx: 0, vy: 0, speed: 0.15, gravity: 0.85 } points.push(point); } return points; } function updateYCoords(range) { points.forEach(function(point) { point.targetY = height / 2 - range / 2 + Math.random() * range * 1.2; }); } return { init: init, render: render, updateYCoords: updateYCoords } }()); var canvas, size, shuffle, range; canvas = document.querySelector('canvas'); size = { width: window.innerWidth, height: window.innerHeight } BezierCurve.init(size, canvas); range = window.innerHeight / 2; setInterval(function() { BezierCurve.updateYCoords(range); }, 1750); (function renderFrame() { window.requestAnimFrame(renderFrame); BezierCurve.render(); }());
粒子
时间
文字
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号