Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; background-color: #000; color: #fff; margin: 0; padding: 0; border-width:0; cursor:pointer; }
JavaScript
"use strict"; window.onload = function() { const sideMin = 50; const sideMax = 120; let canv, ctx; // canvas and context let maxx, maxy; let side; // side of square let nbx, nby; // number of squares in width / height let orgx, orgy; // coordinates of top left corner of grid[0][0] let grid; let colors; /* for animation */ let events = []; // shortcuts for Math.… const mrandom = Math.random; const mfloor = Math.floor; const mround = Math.round; const mceil = Math.ceil; const mabs = Math.abs; const mmin = Math.min; const mmax = Math.max; const mPI = Math.PI; const mPIS2 = Math.PI / 2; const m2PI = Math.PI * 2; const msin = Math.sin; const mcos = Math.cos; const matan2 = Math.atan2; const mhypot = Math.hypot; const msqrt = Math.sqrt; const rac3 = msqrt(3); const rac3s2 = rac3 / 2; const mPIS3 = Math.PI / 3; //----------------------------------------------------------------- function intAlea (min, max) { // random integer number [min..max[ . If no max is provided, [0..min[ if (typeof max == 'undefined') { max = min; min = 0; } return mfloor(min + (max - min) * mrandom()); } // intAlea //----------------------------------------------------------------- function createGrid() { /* attribute color 0, 1 or 2 to every square side so that : - each square uses the 3 colors (two are use once, one is used twice on sides of a same vertex) - matching sides of neighbour square are the same color */ let elem; grid = []; for (let ky = 0; ky < nby ; ++ ky) { grid[ky] = []; for (let kx = 0; kx < nbx ; ++ kx) { grid[ky][kx] = elem = []; // copy constraint from neighbours if (ky > 0) elem[0] = grid[ky - 1][kx][2]; if (kx > 0) elem[3] = grid[ky][kx - 1][1]; // fill two first sides in not constrained if (elem[0] === undefined) elem[0] = intAlea(3); if (elem[3] === undefined) elem[3] = intAlea(3); // if equal, give other possible values to other sides if (elem[0] == elem[3]) { let a = (elem[0] + 1) % 3; let b = (elem[0] + 2) % 3; if (intAlea(2)) { elem[1] = a; elem[2] = b; } else { elem[2] = a; elem[1] = b; } } else { // two first sides different // pick thirs value let ov = 0; while (ov == elem[0] || ov == elem[3]) ++ ov; // pick value to use twice let tut = intAlea(3); if (tut == ov) { elem[1] = elem[2] = tut; } else { if (tut == elem[3]) { elem[2] = tut; // same as on side 3 elem[1] = ov; // other color } else { elem[1] = tut; // same as on side 0 elem[2] = ov; // other color } } }// if two first sides different } // kx } // ky } // createGrid //----------------------------------------------------------------- function drawCell (kx, ky) { let centre; // of quater circle let hc1; // side of diameter of half circle let hc2; // 'other' side let xc, yc, xhc, yhc; let x = orgx + kx * side; let y = orgy + ky * side; let cell = grid[ky][kx]; if (cell[0] == cell[1]) centre = 3; else if (cell[1] == cell[2]) centre = 0; else if (cell[2] == cell[3]) centre = 1; else if (cell[3] == cell[0]) centre = 2; xc = x + [0, 1, 1, 0][centre] * side; yc = y + [0, 0, 1, 1][centre] * side; // choose side for half circle if (intAlea(2)) { hc1 = centre; hc2 = (centre + 3) % 4; } else { hc2 = centre; hc1 = (centre + 3) % 4; } xhc = x + [0.5, 1, 0.5, 0][hc1] * side; yhc = y + [0, 0.5, 1, 0.5][hc1] * side; ctx.fillStyle = colors[cell[(centre + 1) % 3]]; ctx.fillRect(x, y, side, side); // draw quater circle ctx.beginPath(); ctx.fillStyle = colors[cell[hc2]]; ctx.moveTo(xc , yc ); ctx.arc(xc, yc, side, centre * mPIS2, (centre + 1) * mPIS2); ctx.closePath(); ctx.fill(); // draw half circle ctx.beginPath(); ctx.fillStyle = colors[cell[hc1]]; ctx.moveTo(xhc, yhc); ctx.arc(xhc , yhc, side / 2, hc1 * mPIS2, (hc1 + 2) * mPIS2); ctx.closePath(); ctx.fill(); } // drawCell //----------------------------------------------------------------- function drawGrid() { // draw tiles grid.forEach((line, ky) => { line.forEach((cell, kx) => { drawCell(kx, ky); }); //line.forEach }); //grid.forEach } // drawGrid //----------------------------------------------------------------- let animate; { // scope for animate let animState = 0; animate = function(tStamp) { let event = events.pop(); requestAnimationFrame(animate) if (event) { switch (event.event) { case 'reset' : animState = 0; break; } // switch (event) } // if (event) switch (animState) { case 0 : if (startOver()) ++animState; } // switch (animState) } // animate } // scope for animate //----------------------------------------------------------------- function startOver() { // canvas dimensions maxx = window.innerWidth; maxy = window.innerHeight; let orgLeft = mmax (((window.innerWidth ) - maxx) / 2, 0); let orgTop = mmax (((window.innerHeight ) - maxy) / 2, 0); canv.style.left = orgLeft + 'px'; canv.style.top = orgTop + 'px'; if (maxx != canv.width) canv.width = maxx; if (maxy != canv.height) canv.height = maxy; side = intAlea(sideMin, sideMax); nbx = mceil(maxx / side); nby = mceil(maxy / side); if (nbx < 2 || nby < 2) return false; // not interesting orgx = mround((maxx - nbx * side) / 2) ; orgy = mround((maxy - nby * side) / 2); let hue = intAlea(360); colors = [ `hsl(${hue},${intAlea(80,100)}%, ${intAlea(20,30)}%)`, `hsl(${hue},${intAlea(80,100)}%, ${intAlea(40,50)}%)`, `hsl(${hue},${intAlea(80,100)}%, ${intAlea(70,80)}%)` ] createGrid(); drawGrid(); return true; } // startOver //----------------------------------------------------------------- // beginning of execution { canv = document.createElement('canvas'); canv.style.position="absolute"; document.body.appendChild(canv); ctx = canv.getContext('2d'); canv.addEventListener('click', ()=>{events.push({event:'reset'});}) } // canvas creation events.push({event:'reset'}); requestAnimationFrame(animate) } // window.onload
粒子
时间
文字
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号