| 1 | <!doctype html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <meta charset="utf-8">
|
| 5 | <title>ColorPicker</title>
|
| 6 | <style>*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }</style>
|
| 7 | </head>
|
| 8 | <body style="overflow: hidden; pointer-events: none; touch-action: none; user-select: none; cursor: none; width: 100vw; height: 100vh;">
|
| 9 | <canvas id="canvas-source" style="image-rendering: pixelated; position: absolute; pointer-events: auto; width: 100vw; height: 100vh;"></canvas>
|
| 10 | <div id="div-picker" style="visibility: hidden; position: absolute; left: 0; top: 0; overflow: hidden; display: flex; border-radius: 100%; background: #fff; box-shadow: 0 0 20px 0 #666;">
|
| 11 | <canvas id="canvas-picker" style="image-rendering: pixelated;"></canvas>
|
| 12 | <pre id="pre-color" style="position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); padding: 2px 4px; border-radius: 4px; color: #222; background: #ddd;"></pre>
|
| 13 | </div>
|
| 14 | <script src="./pick-color.js"></script>
|
| 15 | </body>
|
| 16 | </html>
|