自己抽空做了一个画像素画的小工具,界面比较简单,但也可以画着玩.呵呵.

有意思的地方在于可以把画的内容保存为一个数组,可以很方便地还原成图案...

 

主要的JS代码:

 

 

 全部代码在这里

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>像素画</title>
<style>
* {
 margin:0;
 padding:0;
}
.wrap {
 margin:0 auto;
 width:750px;
 border:1px solid #000;
}
.side {
 width:750px;
 height:60px;
 line-height:60px;
 border-bottom:1px solid #000;
}
#main {
 width:750px;
 height:auto;
 text-align:center;
}
#colorBar {
 margin-left:40px;
 border:1px solid #000;
 background-color:#F00;
}
#iTable,#tb {
 border-collapse:collapse;
 margin-bottom:40px;
}
#iTable { border:1px solid #999; }
#tb td {
 border:1px solid #000;
 width:8px; height:8px;
 overflow:hidden;}
#iTable td {
 border:1px solid #999;
 width:12px; height:12px;
 overflow:hidden;
}

#box { margin:42px auto 0; text-align:left; }
.input1 {
 padding:5px;
 width:68px; height:31px;
 text-align:center;
}
#HashInfo {
 width:60%; height:60px;
 font-size:12px;
}
</style>
</head>

<body >


<div class="wrap">
 <div class="side">
     <input type="text" id="colorBar"/>
        <input type="button" class="input1" value="隐藏边框" id="done" />
        <input type="button" class="input1" value="重新开始" id="clear" />
        <input type="button" class="input1" value="放大" id="bigger" />
        <input type="button" class="input1" value="缩小" id="smaller" />
        <select οnchange="iconTable.numChange(this.value)">
         <option value="16">16 * 16</option>
         <option value="22" selected="selected">22 * 22</option>
         <option value="32">32 * 32</option>
         <option value="50">50 * 50</option>
        </select>
        <input type="button" class="input1" value="颜色信息" id="ColorInfo" />
    </div>
 <div id="main"><p style="font-size:12px; text-align:left; width:80%; margin:0 auto;">说明:先点击调色板选取需要的颜色,然后您可点击表格设置颜色,或按CTRL键通过移动鼠标在画板上继续设置颜色.点击"颜色信息"按钮可获取已设置过的颜色值,并可在"还原图案"按钮里进行还原</p>
     <div id="box">
         
        </div>
        <textarea id="HashInfo"></textarea><br /><input type="button" class="input1" value="还原图案" id="SubmitColor" />
    </div>
</div>

 


</body>
</html>
<script type="text/javascript">
function $(x){return document.getElementById(x);}
function getPagePos(el){
 var x=y=0;
 while(el){ x+=el.offsetLeft; y+=el.offsetTop; el=el.offsetParent;}
 return {x:x,y:y}
}

var colorPanel = function(){
 var tb, c, s = "" , cp = "ColorPanel";
 var colors = "00,33,66,99,cc,ff".split(",");
 return {
  el : null,
  setColor : function(el){
   var o = $(el);
   o.onfocus = function(){
    colorPanel.el = o;
    if(!tb){
     tb = document.createElement("div");
     tb.id = "ColorPanel";
     for(var x=0; x<6; x++){
      s += '<tr>';
      for(var y=0; y<6; y++){
       for(var z=0; z<6; z++){
        c = colors[x] + colors[y] + colors[z];
        s += '<td style="background:#'+ c +'" color="#'+ c +'" ></td>'
       }
      }
      s += '</tr>';
     }
     tb.innerHTML = "<table id='tb'>" + s + "</table>";
     document.body.appendChild(tb);
     tb.style.position = "absolute";
     colorPanel.setPos(tb,o);
     var td = tb.getElementsByTagName("td");
     for(var i=0;i<td.length;i++){
      td[i].onclick = function(){
       colorPanel.hide();
       iconTable.setColor( this.getAttribute("color") );
      }
      td[i].onmouseover = function(){ colorPanel.showColor(this);}
     }
    }
    else{
     $(cp).style.display = "block";
     colorPanel.setPos(tb,o);
    }
    
   }
   
  },
  showColor : function(el){
   colorPanel.el.style.backgroundColor = el.getAttribute("color");
   $("colorBar").value = el.getAttribute("color");
  },
  
  hide : function(){ $(cp).style.display = "none"; },
  
  setPos : function(tb,el){ //设置调色板位置
   tb.style.left = getPagePos(el).x + "px";
   tb.style.top  = getPagePos(el).y + el.offsetHeight + 1 + "px";
  }
 }
}()

//画板表格
var iconTable = {
 curColor : "#FF0000",//当前颜色值
 box : $("box"), //画板表格的容器
 border : "none",
 l : 22, //格子数 l * l
 wh_default : 12,//格子初始宽高度,
 wh : 12, //格子宽高度,
 MaxWH : 16,
 MinWH : 4,
 ColorHash : null,
 init : function(l){ //利用数组拼接表格字符
   this.l = l || 22;
   var l = this.l;
   var aT = ["<table id='iTable'>"];
   for(var x=0,t=this.l; x<t; x++){
    aT.push("<tr>");
    for(var y=0,y1=this.l; y<y1; y++){
     aT.push("<td></td>");
    }
    aT.push("</tr>");
   }
   aT.push("</table>");
   //将字符写到容器里
   this.box.innerHTML = aT.join("");
   this.resetPos();
   iconTable.border = "none";
   $("done").value = "隐藏边框";
   iconTable.wh = iconTable.wh_default ;
   var td = $("iTable").getElementsByTagName("td");
   
   this.ColorHash = new Array(l*l);
   //遍历第一个表格,并注册事件
   for(var i=0,l=td.length; i<l; i++){
    (function(k){
     td[k].onclick = function(){
      this.style.backgroundColor = iconTable.curColor;
      iconTable.ColorHash[k] = iconTable.curColor;
     }
     td[k].onmouseover = function(e){
      var e = e || window.event;
      if(e.ctrlKey ){
       this.style.backgroundColor = iconTable.curColor;
       iconTable.ColorHash[k] = iconTable.curColor;
      }
     }
        })(i);
    
   }
 },
 //设置当前颜色
 setColor : function(x){ this.curColor = x; },
 
 removeBorder : function(){
  var td = $("iTable").getElementsByTagName("td");
  var b = iconTable.border;
  for(var i=0,l=td.length; i<l; i++){
   td[i].style.border = b;
  }
  iconTable.border = (iconTable.border == "none")?"1px solid #999": "none";
  $("done").value = (iconTable.border == "none")?"隐藏边框":"显示边框";
 },
 
 clear : function(){
  var td = $("iTable").getElementsByTagName("td");
  for(var i=0,l=td.length; i<l; i++){
   td[i].style.backgroundColor = "#fff";
  }
 },
 
 resetPos : function(){
  var w = $("iTable").offsetWidth;
  var bW = $("main").offsetWidth;
  var l = (bW-w) / 2;
  $("box").style.marginLeft = l + "px";
  
 },
 
 sizeChange : function(pos){
  var pos = pos || 1;
  var td = $("iTable").getElementsByTagName("td");
  var tmp = this.wh + ( 1 * pos );
  if( tmp <= this.MaxWH && tmp >= this.MinWH ){ this.wh = tmp; }
  for(var i=0,l=td.length; i<l; i++){
   td[i].style.height = td[i].style.width = this.wh + "px";
  }
  iconTable.resetPos();
 },
 
 numChange : function(l){
  $("iTable").parentNode.removeChild( $("iTable") ); 
  iconTable.init(l);
  iconTable.resetPos();
 },
 
 showHash : function(){
  $("HashInfo").value = iconTable.ColorHash ;
 },
 
 submitColor : function(v){
  var td = $("iTable").getElementsByTagName("td");
  var arr = iconTable.ColorHash = v.split(",");
  for(var i=0,l=td.length; i<l; i++){
   td[i].style.backgroundColor = arr[i];
  }
 }
 
}  

iconTable.init();
colorPanel.setColor("colorBar");

$("done").onclick = function(){ iconTable.removeBorder(); }
$("clear").onclick = function(){ iconTable.clear(); }
$("bigger").onclick = function(){ iconTable.sizeChange(1); }
$("smaller").onclick = function(){ iconTable.sizeChange(-1); }
$("ColorInfo").onclick = function(){ iconTable.showHash(); }
$("SubmitColor").onclick = function(){ iconTable.submitColor($("HashInfo").value);}
</script>
 

 

下面是自己使用这个小工具画的图案,哈哈

 

 

 

 

数组值在这里,有兴趣的可以贴进去还原一下

 

小蘑菇:22*22

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,#000000,#000000,#000000,#000000,#000000,#000000,,,,,,,,,,,,,,,#000000,#000000,#000000,#ff9900,#cc0033,#cc0033,#ff9900,#000000,#000000,#000000,,,,,,,,,,,,#000000,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#000000,#000000,,,,,,,,,,#000000,#000000,#cc0033,#ff9900,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#ff9900,#cc0033,#000000,#000000,,,,,,,,,#000000,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#000000,,,,,,,,#000000,#000000,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#000000,#000000,,,,,,,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#000000,,,,,,,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#000000,,,,,,,#000000,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#000000,,,,,,,#000000,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#000000,,,,,,,#000000,#cc0033,#cc0033,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#cc0033,#cc0033,#000000,,,,,,,#000000,#000000,#000000,#000000,,,#000000,,,#000000,,,#000000,#000000,#000000,#000000,,,,,,,,#000000,#000000,#ffffff,,,#000000,,,#000000,,,,#000000,#000000,,,,,,,,,,#000000,#ffffff,,,,,,,,,,#000000,,,,,,,,,,,#000000,#000000,,,,,,,,,#000000,#000000,,,,,,,,,,,,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,


超级玛丽 16*16
,,,,,,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,,,#ffccff,#ffccff,#ffccff,,,,,,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0033,#cc0000,#cc0000,#cc0000,#ffccff,#ffccff,,,,,,#000000,#000000,#000000,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#000000,#000000,#000000,,,,,#000000,#ffccff,#000000,#ffccff,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#000000,#000000,#000000,,,,,#000000,#ffccff,#000000,#000000,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#000000,#000000,#000000,,,,,#000000,#000000,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#ffccff,#000000,,,,,,,#ffccff,#ffccff,#ffccff,#ffccff,#000000,#000000,#000000,#000000,#000000,,,,,,,,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#000000,,,,,#000000,#000000,#000000,#000000,#000000,#cc0000,#000000,#000000,#000000,#cc0000,#000000,,,,,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#cc0000,#000000,#000000,#000000,#cc0000,,,#000000,#ffccff,#ffccff,#000000,#000000,#000000,#000000,#000000,#000000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,,,#000000,#ffccff,#ffccff,#ffccff,,#cc0000,#cc0000,#000000,#cc0000,#cc0000,#ccffff,#cc0000,#cc0000,#ccffff,#cc0000,#000000,#000000,#ffffff,#ffccff,,#330000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#000000,#000000,,,#330000,#330000,#330000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#000000,#000000,,#330000,#330000,#330000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#ffffff,#ffffff,#ffffff,,,,#330000,,,#cc0000,#cc0000,#cc0000,#cc0000,,,,,,,,

 

 

 

 

 

 

<script type="text/javascript"> </script>

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生