d3实现像素点绘制艺术图片生产单个div和css代码
代码语言:html
所属分类:其他
代码描述:d3实现像素点绘制艺术图片生产单个div和css代码
代码标签: d3 像素点 绘制 艺术 图片 生产 单个 div css 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { --space: clamp(1rem, 2vw, 2.5rem); --shadow: 0.6rem 0.6rem 0; font-family: 'VT323', monospace; font-size: 1.2rem; margin: 0; padding: calc(var(--space) * 2) var(--space); background: lightblue; accent-color: turquoise; min-height: 100vh; display: flex; align-items: center; justify-content: center; } button { font-family: inherit; font-size: inherit; background: orchid; border: 0.22rem solid; border-radius: 0.3rem; padding: 0.2rem 1rem; box-shadow: 0.2rem 0.2rem 0; } button:hover, button:focus-visible { background: orange; } input[type="color"] { border: 0.22rem solid; border-radius: 0.3rem; box-shadow: 0.2rem 0.2rem 0; margin-right: 2rem; } h1 { font-family: 'Press Start 2P', cursive; font-weight: 400; margin: 0 0 var(--space); text-shadow: 0.1em 0.1em 0 orange; } p { margin: 0; } header { outline: 0.3rem solid; padding: var(--space); margin-bottom: calc(var(--space) * 2); box-shadow: var(--shadow); background: peachpuff; } .wrapper { width: 100%; max-width: 800px; margin: 0 auto; } @media (min-width: 70em) { .wrapper { max-width: 1200px; display: grid; grid-template-columns: 2fr 1fr; gap: 0 2rem; } } .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: calc(var(--space) * 1.5); grid-column: 1; } .canvas { --sizeX: var(--cellSizeCol, calc(100% / var(--colCount, 40))); --sizeY: var(--cellSizeRow, calc(100% / var(--rowCount, 30))); grid-column: 1; position: relative; outline: 0.3rem solid; box-shadow: var(--shadow); margin-bottom: calc(var(--space) * 2); background: linear-gradient(to right, transparent calc(100% - 1px), lightgrey 0), linear-gradient(to bottom, transparent calc(100% - 1px), lightgrey 0), white; background-size: var(--sizeX) 100%, 100% var(--sizeY); } .draw-area { position: relative; aspect-ratio: 4 / 3; background-repeat: no-repeat; background-size: var(--sizeX) var(--sizeY); } .marker { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(to right, var(--bg, black), var(--bg, black)); aspect-ratio: 1; background-size: var(--sizeX) var(--sizeY); background-repeat: no-repeat; opacity: 0; } .css label { display: block; } textarea { display: block; width: 100%; border: 0.3rem 0.3rem 0; box-shadow: var(--shadow); margin-bottom: var(--space); padding: 0 1rem; } [data-undo] { background: orange; } </style> </head> <body > <div class="wrapper"> <header> <h1>Pixel Art Studio</h1> <p>Make your own single-div pixel art with CSS.</p> </header> <div class="controls"> <label for="colorPicker">Color picker</label> <input type="color" id="colorPicker"> <label for="cellSize">Columns</label> <input type="range" min="10" max="60" id="columns" step="10" value="30"> <button data-undo>Undo</button> <button data-clear>Clear</button> <button data-save>Save</button> </div> <div class="canvas"> <div class="draw-area"> <div class="marker"></div> </div> </div> <div class="css"> <label for="css">CSS:</label> <textarea name="cssCode" id="css" rows="10"></textarea> <button data-copy>Copy to clipboard</button> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.7.7.0.js"></script> <script > const canvas = d3.select('.canvas'); const colorInput = d3.select('#colorPicker'); const marker = d3.select('.marker'); const clearButton = d3.select('[data-clear]'); const saveButton = d3.select('[data-save]'); const undoButton = d3.select('[data-undo]'); const copyButton = d3.select('[data-copy]'); const textArea = d3.select('#css.........完整代码请登录后点击上方下载按钮下载查看
网友评论0