js实现曲线颜色配色圆盘效果代码
代码语言:html
所属分类:选择器
代码描述:js实现曲线颜色配色圆盘效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> svg { height: 400px; width: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* cursor:none; */ z-index: 100; /* pointer-events: none; */ } body { background-color: black; overflow: hidden; } .blurry { -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */ filter: blur(5px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } path { cursor: pointer; } #newColor { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background-color: #000000; cursor: pointer; border: 2px solid white; border-radius: 20px; padding: 10px; z-index: 200; font-family: "Roboto", sans-serif; font-weight: bold; outline: none; } #azizLight { position: absolute; top: calc(50% + 30px); left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0); cursor: pointer; border: none; z-index: 200; outline: none; } #shape { height: 400px; width: 400px; /* border: 1px solid white; */ border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } </style> </head> <body> <div id="shape"></div> <button id="newColor" onclick="newColor()">nah... Next!</button> <button id="azizLight" onclick="azizLight()" title="toggle lights">💡</button> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sweetalert2.all.js"></script> <script> let w = window.innerWidth; let h = window.innerHeight; let x, y; let rgb1, rgb2, rgb3, rgb4; //random number generator function randNum(from, to) { return Math.floor(Math.random() * (to - from + 1) + from); } //normalize between 0 and 1 function normalize(val, min, max) { return (val - min) / (max - min); } // console.log(normalize(5,0,10)); //random color generator function randColor() { let r = randNum(0, 255); let g = randNum(0, 255); let b = randNum(0, 255); go(r, g, b); } //31, 0, 255 //complimentary colors function complimentary(x) { return 255 - Math.abs(x - 127.5); } function complimentary2(x) { return 255 - Math.abs(x - 63.75); } function complimentary3(x) { return 255 - Math.abs(x - 191.25); } //extras if needed function complimentary4(x) { return 255 - Math.abs(x - 85); } function complimentary5(x) { return 255 - Math.abs(x - 170); } function go(r, g, b) { let rr = Math.round(complimentary4(r)); let gg = Math.round(complimentary4(g)); let bb = Math.round(complimentary4(b)); let rrr = Math.round(complimentary2(r)); let ggg = Math.round(complimentary2(g)); let bbb = Math.round(complimentary2(b)); let rrrr = Math.round(complimentary3(r)); let gggg = Math.round(complimentary3(g)); let bbbb = Math.round(complimentary3(b)); //change color variables rgb1 = "rgb(" + r + "," + g + "," + b + ")"; rgb2 = "rgb(" + rr + "," + gg + "," + bb + ")"; rgb3 = "rgb(" + rrr + "," + ggg + "," + bbb + ")"; rgb4 = "rgb(" + rrrr + "," + gggg + "," + bbbb + ")"; } function copyToClipboard(text) { var dummy = document.createElement("input"); document.body.appendChild(dummy); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0