<style>
body
{
background-color :ghostwhite;
color :blue;
cursor :default;
}
input
{
border-width :1;
background-color :wheat;
width :190;
}
</style>
<span id=lianxi style="font-size:400;position:absolute;z-index:-2;"></span>
<textarea id=ta cols=64 rows=21 style="overflow:hidden">帮助：
先在“大字”里填入要写的字
再按“开始临摹”
蓝色框里：
鼠标左键 = 画去一点
鼠标右键 = 擦上一点
shift+鼠标拖动 = 连续画
ctrl +鼠标拖动 = 连续擦→←↑↓控制范例字体的位置。
+ - 控制范例字体的大小
点了后用ENTER可以加快前景和背景为一个16位字符或两个8为字符完成后按 ==转换== 就可以看效果
</textarea>
<br>
背景<input id=back value="∷">
前景<input id=front value="●"><br>
大字<input type=text id=lx value="永"> 制作<input type=text disabled=true value=" 迷失网络
[email protected]"><br>
<input type=button value="开始临摹" onclick="changelianxi()"> <input type=button id=btn disabled=true value="==转换=="><br>
<input type=button onclick="ChangeLeft(1)" value="→"> <input type=button onclick="ChangeLeft(-1)" value="←"><br>
<input type=button onclick="ChangeTop(-1)" value="↑"> <input type=button onclick="ChangeTop(1)" value="↓"><br>
<input type=button onclick="ChangeSize(1)" value="+"> <input type=button onclick="ChangeSize(-1)" value="-">
<script>function changelianxi()
{
if(lx.value)lianxi.innerText=lx.value
btn.disabled=false;
}var wh=32;
oTable=null;
var arrMap=new Array();
var arr=new Array(wh);
var ladd=0;
var tadd=0;
var size=400;
function ChangeSize(a)
{
size+=a;
if(size<10)size=10;
lianxi.style.fontSize=size;
}
function ChangeTop(a)
{
tadd+=a;
document.recalc();
}
function ChangeLeft(a)
{
ladd+=a;
document.recalc();
}
for(var i=0;i<arr.length;i++)
{
arr
=new Array(wh);
}
function ClassItem(element,r,c)
{
this.e=element;
this.r=r;
this.c=c;
element.style.width=11;
element.style.height=11;
element.style.backgroundColor="steelblue";
element.attachEvent("onmousemove",td_onaction);
element.attachEvent("oncontextmenu",td_onaction);
element.attachEvent("onclick",td_onaction);
}
function document.oncontextmenu()
{
switch(event.srcElement.tagName.toLowerCase())
{
case "textarea":
case "input":
return true;
default:
break;
}
event.returnValue=false;
}
function window.onload()
{
oTable=document.createElement("TABLE");
oTable.style.marginLeft=2;
oTable.cellSpacing=1;
oTable.cellPadding=1;
for(var i=0;i<wh;i++)
{
var oTr=oTable.insertRow();
for(var j=0;j<wh;j++)
{
var oTd=oTr.insertCell();
MakeTd(oTd,i,j)
}
}
document.body.insertAdjacentElement("BeforeEnd",oTable);
oTable.style.filter="alpha(opacity=80)";
lianxi.style.setExpression("pixelLeft","oTable.offsetLeft+ladd");
lianxi.style.setExpression("pixelTop","oTable.offsetTop+tadd");
btn.attachEvent("onclick",show);
}
function MakeTd(e,r,c)
{
var item=new ClassItem(e,r,c);
arrMap[e.uniqueID]=item;
arr[r][c]=item;
}
function td_onaction()
{
var item=arrMap[event.srcElement.uniqueID];
if(!item)return true;
if(event.shiftKey||event.type=="click")
{
item.e.style.backgroundColor="tan";
}
if(event.ctrlKey||event.type=="contextmenu")
{
item.e.style.backgroundColor="steelblue";
event.returnValue=false;
}
}
function show()
{
var str="";
for(var i=0;i<wh;i++)
{
for(var j=0;j<wh;j++)
{
if(arr[j].e.style.backgroundColor=="tan")
{
str+=front.value;
}
else
{
str+=back.value;
}
}
str+="\n";
}
ta.value=str;
}
</script>
