js实现贝塞尔曲线可视化调节hsl颜色效果代码
代码语言:html
所属分类:其他
代码描述:js实现贝塞尔曲线可视化调节hsl颜色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css"> <style> @charset "UTF-8"; :root { --maxw: 20rem; } body { margin: 0; padding: 2rem; background-color: #fff; color: #202126; } body.inverted-lightness { background-color: #000; color: #fff; } body.inverted-lightness input { accent-color: #fff; } input { accent-color: #202126; } body, select, option, button { font-family: "Sometype Mono", monospace; font-optical-sizing: auto; font-style: normal; color: inherit; } select { text-align: right; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; text-decoration: underline; cursor: pointer; padding-right: 5.25ch; margin-right: -2.25ch; background: transparent; color: inherit; } select:hover { text-decoration: none; } select + i { pointer-events: none; } select + i::before { content: "▼"; } .container { max-width: 34rem; margin: 0 auto; } @media (orientation: landscape) { .container { max-width: 50rem; display: flex; align-items: center; } } .canvas-container { position: relative; width: 100%; aspect-ratio: 1; margin-bottom: 1rem; cursor: -webkit-grab; cursor: grab; } .dragging .canvas-container { cursor: -webkit-grabbing; cursor: grabbing; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; touch-action: none; } .controls { max-width: var(--maxw); margin: 0 auto 2rem; } .controls span { padding-right: 0.25em; min-width: 13ch; } .controls strong { display: inline-block; min-width: 3.25ch; text-align: right; } .control-label { display: flex; gap: 1ch; font-size: 0.8rem; justify-content: space-between; border: 1px solid #e0e0e0; padding: 1.25rem; } .control-label div { display: flex; gap: 0.5rem; } .control-label input[type=range], .control-label select { flex: 1 1 auto; } .control-label + .control-label { margin-top: -1px; } .color-strip { height: 1rem; max-width: calc(var(--maxw) - 2px); margin: 0 auto -1px; border: 1px solid #e0e0e0; } abbr[title] { text-decoration: none; } </style> </head> <body translate="no"> <article class="container"> <div class="canvas-container" id="canvasContainer"> <canvas id="canvas"></canvas> </div> <aside class="controls" aria-label="controls"> <div class="color-strip" id="colorStrip"></div> <label class="control-label"> <span>Colors</span> <input type="range" data-state="numColorStops" data-type="int" min="3" max="30" value="9"> <strong data-label="numColorStops">9</strong> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0