Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body, html { margin: 0; overflow: hidden; } canvas { display: block; cursor: pointer; }
JavaScript
/* Johan Karlsson, 2021 MIT License, see Details View */ let canvas; let ctx; let w, h; let hexagons; let nrOfTwists; class Hexagon { constructor(x, y, R) { this.x = x; this.y = y; this.R = R; this.direction = Math.random() > 0.5 ? -1 : 1; } draw() { ctx.save(); ctx.translate(this.x, this.y); let nrOfPoints = 6; for(let twist = 0; twist < nrOfTwists; twist++) { let factor = 1 - (twist + 0) / nrOfTwists; ctx.beginPath(); for (let point = 0; point < nrOfPoints; point++) { let angle = Math.PI * 2 * point / nrOfPoints + Math.PI / 6; let x = Math.cos(angle) * this.R * factor; let y = Math.sin(angle) * this.R * factor; ctx.lineTo(x, y); } ctx.closePath(); ctx.stroke(); ctx.rotate(Math.PI / nrOfTwists * 0.67 * this.direction); } ctx.restore(); } } function setup() { canvas = document.querySelector("#canvas"); ctx = canvas.getContext("2d"); window.addEventListener("resize", () => { resize(); draw(); }); canvas.addEventListener("click", draw); resize(); } function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; ctx.fillStyle = "black"; ctx.lineCap = "round"; ctx.lineJoin = "round"; } function setupHexagons() { hexagons = []; let r = Math.random() * 100 + 30; let R = r / Math.cos(Math.PI / 6); let t = r * 2 / Math.sqrt(3); let rows = w / (r * 2) + 1; let cols = h / R; for(let x = 0; x < rows; x++) { for(let y = 0; y < cols; y++) { let xOffset = y % 2 === 0 ? r : 0; let xPixel = r * x * 2 + xOffset; let yPixel = (t/2 + R) * y; let hexagon = new Hexagon(xPixel, yPixel, R); hexagons.push(hexagon); } } } function draw() { ctx.fillRect(0, 0, w, h); ctx.strokeStyle = Math.random() > 0.5 ? "rgb(255, 255, 50)" : "rgb(100, 255, 100)"; setupHexagons(); nrOfTwists = Math.random() * 15 + 10; hexagons.forEach(h => { h.draw(); }); } setup(); draw();
粒子
时间
文字
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号