1<?php class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8'); ?>
2<!DOCTYPE html><class="tag">html lang="zh-CN"><class="tag">head><class="tag">meta charset="UTF-class="number">8"><class="tag">meta name="viewport" content="width=device-width,initial-scale=class="number">1.0">
3<class="tag">title>像素画板 - η空间</class="tag">title>
4<class="tag">meta name="description" content="在线像素画板，16x16像素格子，画个火柴人发朋友圈。">
5<class="tag">link rel="stylesheet" href="/tools/share.css"><class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
6<class="tag">style>
7*{margin:class="number">0;padding:class="number">0;box-sizing:border-box}
8body{font-family:class="string">'Outfit',-apple-system,sans-serif;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;color:#F7F5F0;min-height:100vh;display:flex;flex-direction:column;align-items:center}
9h1{margin-top:30px;font-size:24px}h1 .a{color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
10.toolbar{display:flex;gap:8px;align-items:center;margin:12px class="number">0;flex-wrap:wrap;justify-content:center}
11.color-btn{width:28px;height:28px;border-radius:class="number">50%;border:2px solid transparent;cursor:pointer;transition:all .2s}
12.color-btn.active{border-color:class=class="string">"keyword">class=class="string">"comment">#fff;transform:scale(class="number">1.2)}
13.canvas-wrapper{background:class=class="string">"keyword">class=class="string">"comment">#class="number">161616;border:1px solid #class="number">222;border-radius:12px;padding:8px}
14class=class="string">"keyword">class=class="string">"comment">#canvas{display:grid;gap:1px;cursor:crosshair;user-select:none}
15.pixel{width:22px;height:22px;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;border-radius:2px;transition:background .1s}
16.pixel:hover{opacity:class="number">0.8}
17.actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
18.btn{padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:class="number">600;cursor:pointer;transition:all .2s}
19.btn-primary{background:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#fff}
20.btn-outline{background:transparent;border:1px solid class=class="string">"keyword">class=class="string">"comment">#class="number">333;color:#ccc}
21.btn-outline:hover{border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#FF6B35}
22.size-control{display:flex;align-items:center;gap:6px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;font-size:12px}
23.size-control input{width:60px;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;border:1px solid #class="number">333;border-radius:6px;color:#ccc;padding:4px 8px;text-align:center;font-family:class="string">'JetBrains Mono',monospace}
24.size-control input:focus{outline:none;border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
25</class="tag">style></class="tag">head><class="tag">body>
26<class="tag">h1><class="tag">span class=class="string">"keyword">class="a">🎨</class="tag">span> 像素画板</class="tag">h1>
27<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">🎨 选颜色后点格子填充 · 拖拽连续画 · 支持撤销/导出PNG</class="tag">p>
28<class="tag">div class=class="string">"keyword">class="toolbar" id="colorBar"></class="tag">div>
29<class="tag">div class=class="string">"keyword">class="canvas-wrapper">
30<class="tag">div id="canvas"></class="tag">div>
31</class="tag">div>
32<class="tag">div class=class="string">"keyword">class="actions">
33<class="tag">button class=class="string">"keyword">class="btn btn-primary" onclick="clearCanvas()">🗑 清空</class="tag">button>
34<class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="undoCanvas()">↩ 撤销</class="tag">button>
35<class="tag">button class=class="string">"keyword">class="btn btn-outline" onclick="exportCanvas()">💾 导出PNG</class="tag">button>
36<class="tag">div class=class="string">"keyword">class="size-control">格子 <class="tag">input type="number" id="gridSize" value="class="number">16" min="class="number">8" max="class="number">32" onchange="resizeCanvas()"></class="tag">div>
37</class="tag">div>
38<class="tag">script src="/tools/share.js"></class="tag">script><class="tag">script src="/assets/pet-cat.js"></class="tag">script>
39<class="tag">script>
40class=class="string">"keyword">var colors=[class="string">'class="keyword">class="comment">#FF6B35',class="string">'#ef4444',class="string">'#f472b6',class="string">'#a78bfa',class="string">'#60a5fa',class="string">'#4ade80',class="string">'#facc15',class="string">'#fb923c',class="string">'#ffffff',class="string">'#class="number">888888',class="string">'#class="number">333333',class="string">'#class="number">000000'];
41class=class="string">"keyword">var currentColor=class="string">'class="keyword">class="comment">#FF6B35',size=class="number">16,pixels=[],history=[],drawing=false;
42class=class="string">"keyword">function initColors(){
43 class=class="string">"keyword">var bar=document.class="func">getElementById(class="string">'colorBar');
44 colors.forEach(class=class="string">"keyword">function(c,i){
45 class=class="string">"keyword">var d=document.createElement(class="string">'div');d.className=class="string">'color-btn'+(i===class="number">0?class="string">' active':class="string">'');
46 d.style.background=c;d.onclick=class=class="string">"keyword">function(){selectColor(c)};
47 bar.appendChild(d);});
48 class=class="string">"keyword">class=class="string">"comment">// eyedropper-like
49 bar.insertAdjacentHTML(class="string">'beforeend',class="string">'<class="tag">input type="color" id="customColor" value="class="keyword">class="comment">#FF6B35" oninput="selectColor(class="keyword">this.value)" style="width:28px;height:28px;border:none;border-radius:class="number">50%;cursor:pointer;padding:class="number">0;background:none">');
50}
51class=class="string">"keyword">function selectColor(c){currentColor=c;
52 document.querySelectorAll(class="string">'.color-btn').forEach(class=class="string">"keyword">function(b){b.classList.remove(class="string">'active')});
53 document.class="func">getElementById(class="string">'customColor').value=c;}
54class=class="string">"keyword">function resizeCanvas(){
55 size=parseInt(document.class="func">getElementById(class="string">'gridSize').value)||class="number">16;
56 class=class="string">"keyword">if(size<class="number">4)size=class="number">4;class=class="string">"keyword">if(size>class="number">48)size=class="number">48;
57 document.class="func">getElementById(class="string">'gridSize').value=size;
58 clearCanvas();}
59class=class="string">"keyword">function clearCanvas(){
60 pixels=class="func">Array(size*size).fill(class="string">'class="keyword">class="comment">#0C0C0C');
61 history=[];render();}
62class=class="string">"keyword">function undoCanvas(){
63 class=class="string">"keyword">if(history.length<class="number">2)class=class="string">"keyword">return;
64 history.pop();pixels=history[history.length-class="number">1]?[...history[history.length-class="number">1]]:[...class="func">Array(size*size).fill(class="string">'class="keyword">class="comment">#0C0C0C')];
65 class=class="string">"keyword">if(history.length===class="number">0)pixels=class="func">Array(size*size).fill(class="string">'class="keyword">class="comment">#0C0C0C');
66 render();}
67class=class="string">"keyword">function render(){
68 class=class="string">"keyword">var c=document.class="func">getElementById(class="string">'canvas');
69 c.style.gridTemplateColumns=class="string">'repeat('+size+class="string">',22px)';
70 c.innerHTML=class="string">'';
71 class=class="string">"keyword">for(class=class="string">"keyword">var i=class="number">0;i<class="tag">pixels.length;i++){
72 class=class="string">"keyword">var d=document.createElement(class="string">'div');d.className=class="string">'pixel';d.style.background=pixels[i];
73 d.class="func">addEventListener(class="string">'mousedown',class=class="string">"keyword">function(i){class=class="string">"keyword">return class=class="string">"keyword">function(){drawing=true;paint(i)}}(i));
74 d.class="func">addEventListener(class="string">'mouseover',class=class="string">"keyword">function(i){class=class="string">"keyword">return class=class="string">"keyword">function(){class=class="string">"keyword">if(drawing)paint(i)}}(i));
75 d.class="func">addEventListener(class="string">'touchstart',class=class="string">"keyword">function(i){class=class="string">"keyword">return class=class="string">"keyword">function(e){e.preventDefault();paint(i)}}(i));
76 d.class="func">addEventListener(class="string">'touchmove',class=class="string">"keyword">function(i){class=class="string">"keyword">return class=class="string">"keyword">function(e){e.preventDefault();
77 class=class="string">"keyword">var t=e.changedTouches[class="number">0],el=document.elementFromPoint(t.clientX,t.clientY);
78 class=class="string">"keyword">if(el&&el.classList.contains(class="string">'pixel')){class=class="string">"keyword">var idx=Array.from(c.children).indexOf(el);class=class="string">"keyword">if(idx>=class="number">0)paint(idx);}}
79 }(i));
80 c.appendChild(d);}
81}
82class=class="string">"keyword">function paint(i){
83 class=class="string">"keyword">if(pixels[i]!==currentColor){
84 history.push([...pixels]);pixels[i]=currentColor;
85 class=class="string">"keyword">var children=document.class="func">getElementById(class="string">'canvas').children;
86 class=class="string">"keyword">if(children[i])children[i].style.background=currentColor;}
87}
88document.class="func">addEventListener(class="string">'mouseup',class=class="string">"keyword">function(){drawing=false});
89document.class="func">addEventListener(class="string">'mouseleave',class=class="string">"keyword">function(){drawing=false});
90class=class="string">"keyword">function exportCanvas(){
91 class=class="string">"keyword">var c=document.createElement(class="string">'canvas');c.width=size*class="number">4;c.height=size*class="number">4;
92 class=class="string">"keyword">var ctx=c.getContext(class="string">'2d');
93 class=class="string">"keyword">for(class=class="string">"keyword">var i=class="number">0;i<class="tag">pixels.length;i++){
94 class=class="string">"keyword">var x=(i%size)*class="number">4,y=Math.floor(i/size)*class="number">4;
95 ctx.fillStyle=pixels[i];ctx.fillRect(x,y,class="number">4,class="number">4);}
96 class=class="string">"keyword">var link=document.createElement(class="string">'a');link.download=class="string">'pixel-art.png';
97 link.href=c.toDataURL();link.click();}
98initColors();clearCanvas();
99</class="tag">script><class="tag">div style="text-align:center;padding-top:10px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555"><class="tag">a href="source-viewer.php?file=pixel-art.php" style="color:#FF6B35;text-decoration:none;">📖 查看源码</class="tag">a> · 编程小白，AI生成，若体验不佳请多包涵 🙏</class="tag">div>
100</class="tag">body></class="tag">html>
101
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 72
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 73
像素画板 - η空间
🎨 像素画板
🎨 选颜色后点格子填充 · 拖拽连续画 · 支持撤销/导出PNG
格子
📖 查看源码 · 编程小白，AI生成，若体验不佳请多包涵 🙏