原来以为象坦克大战、超级玛丽之类的小游戏，开始画面里面的砖块字是静态图片，现在才知道原来都是动态贴图贴出来的，下面用 HTML5 的绘图功能，咱也太做一个坦克大决战的开始画面，顺便研究一下点阵字。
一、点阵字
贴图实际上和点阵字没有多大区别，唯一的区别就是把点用小图片代替了而已，下面是一个点阵字的小程序，你可以输入汉字或者英文字母，然后程序就会分析并生成文字的点阵，然后把它显示出来。至于怎么分析并生成点阵，思路如下：
1、将文字用 ctx.fillText 方法画到一块内存画布上，前景色为黑，背景色为白
2、读取画布的每一个像素，并用相应的符号代替，组成字符串
这里有一个问题，内存画布应该多大？我的解决办法是，尽可能大，保证无论什么字体都不会出界。
在分析完像素的过程中，同时可以记录下文字的宽度和高度，等分析完成以后，再一次生成一块新的画布，这一次可以和文字大小更好相等。
还有一个问题就是文字太小的时候，字体就有点失真，这应该就是一个分辨率的问题，小字体人的肉眼看不清的，程序一样也分析不清楚。
所以小尺寸的字体需要经过专门的设计，像坦克大战上的字体那样。
二、砖块字
知道了点阵子的原理，实现砖块字就很简单了，这里是一副资源图片，砖块就是从里面截取的：
砖块很小，在图片的中间靠右下方，我们玩的坦克大战游戏里面每一关的地图就是由这么简单一个图片生成的，真是没想到啊。
下面是砖块字的点阵数据，这里只有一部分，刚好组成游戏开机画面里面的：BATTLE CITY 和游戏结束画面里面的
三、代码
因为时间比较紧张，代码写的比较丑，代码里面用到了一个 jsgame.js，这是我自己对 HTML5 2D 功能进行了一个简单的包装，模仿了 pygame 的部分接口样式。
经过封装以后，可以看出来，绘图相关的代码就非常简单了，其他主要都是运算逻辑代码。
代码
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" language="javascript" src="jsgame.js"></script>
</head>
<body>
<canvas id="html5_08_1" width="180" height="180" style=" background-color: black">
你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas>
文本：<input type="text" id="text" value="博客园" />
字号：<input type="text" id="size" value="16" size="2" />
字体：<select id="fontName">
<option>宋体</option>
<option>楷体_GB2312</option>
<option>隶书</option>
<option>Kristen ITC</option>
<option>Harrington</option>
</select>
<input type="checkbox" id="ckBold" />黑体
<input type="checkbox" id="ckitalic" />斜体
<input type="button" id="btnStart" disabled value="处理" onclick="draw_pixel_text()" />
<br/><textarea wrap="off" rows="20" cols="120" id="txtResult" ></textarea>
<p/>
<img alt="坦克大战的资源图片" src="http://images.cnblogs.com/cnblogs_com/myqiao/sprites.gif"/><br/>
<canvas id="html5_08_2" width="480" height="200" style=" background-color: black">
你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" id="btn_draw" value="绘制砖块字" onclick="draw_brick_text()" />
<script type="text/javascript">
draw_pixel_text();
function draw_pixel_text(){
var display= Display.attach(document.getElementById("html5_08_1"));
document.getElementById("btnStart").setAttribute("disabled","true");
document.getElementById("txtResult").value="";
display.clear();
var text=document.getElementById("text").value
var size=document.getElementById("size").value
var font=new Font();
font.bold=document.getElementById("ckBold").checked;
font.italic=document.getElementById("ckitalic").checked;
font.name=document.getElementById("fontName").value;
var sur=font.render(text,size);
display.draw(sur,10,10);
var str='';
for(var y=0;y<sur.height;y++){
for(var x=0;x<sur.width;x++){
if((sur.get_pixel(x,y)[0]<255))
str=str+'龍';
else
str=str+' ';
}
str=str+'\n';
}
document.getElementById("txtResult").value=str;
document.getElementById("btnStart").removeAttribute("disabled");
}
///======================================================================
///下面的代码是绘制砖块字
//截断字符，每 7 个一组
function chunk(str,len){
var count=0;
var list=[];
var temp=[];
var times=0;
for(var i=0;i<str.length;i++){
if(count<len){
temp.push(str[i])
count++;
}else{
count=0;
list[times]=temp;
temp=[];
temp.push(str[i])
count++;
times++;
}
}
list[times]=temp;
return list;
}
//字母和对应的点阵数据
var keys="abcegilmortvy";
var values=["0011100011011011000111100011111111111000111100011",
"1111110110001111000111111110110001111000111111110",
"0011110011001111000001100000110000001100110011110",
"1111110110000011000001111100110000011000001111110",
"0011111011000011000001100111110001101100110011111",
"1111110001100000110000011000001100000110001111110",
"1100000110000011000001100000110000011000001111110",
"1100011111011111111111111111110101111000111100011",
"0111110110001111000111100011110001111000110111110",
"1111110110001111000111100111111110011011101100111",
"1111110001100000110000011000001100000110000011000",
"1100011110001111000111110111011111000111000001000",
"1100110110011011001100111100001100000110000011000"];
var game2=new JsGame();
//载入图片
var img=new Image();
img.src="data:image/gif;base64,......";//省略四个字节
var bricks=[];
img.onload=function(){
//图片载入后，将砖块的部分从中间截取出来，并分为四小部分
var temp= new Surface(img).subsurface(56,64,8,8)
bricks[0]=temp.subsurface(0,0,4,4)
bricks[1]=temp.subsurface(4,0,4,4)
bricks[2]=temp.subsurface(0,4,4,4)
bricks[3]=temp.subsurface(4,4,4,4)
}
//检测资源是否装载完毕
game2.is_ready(function(){
return img.complete
});
//开始绘制
function draw_brick_text(){
//如果正在绘制，则停止
game2.stop()
//绑定画布
var display= new Display.attach(document.getElementById("html5_08_2"));
//清空画布
display.clear();
//要绘制的字符串
var text='BATTLECITY'.toLowerCase();
//将每个字符的点阵数据截成 7 段，即每个字符都是 7*7 的点阵，方便绘制
var alph_bits=[];
for(var i=0;i<text.length;i++)
for(var index=0;index<keys.length;index++)
if(keys[index]==text[i])
alph_bits.push(chunk(values[index],7));
var which=0;
var p_row=0;
var p_col=0;
var surface= new Surface(28,28);
game2.loop(function(){
if(alph_bits[which][p_row][p_col]==1){
var temp=null;
if((p_row%2)==0){
if((p_col%2)==0)
temp=bricks[0];
else
temp=bricks[1];
}
else{
if((p_col%2)==0)
temp=bricks[2];
else
temp=bricks[3];
}
surface.draw(temp,p_col*4,p_row*4)
display.save()
display.scale(2,2)
if(which<6)
display.draw(temp,which*32+p_col*4+20,p_row*4+20);
else
display.draw(temp,(which-5)*32+p_col*4+20,p_row*4+56);
display.restore()
}
p_col++
if((p_col%7)==0){
p_col=0
p_row++
if((p_row%7)==0){
p_row=0;
p_col=0;
which++;
if(which==text.length) game2.stop()
}
}
})
}
</script>
</body>
</html>Atas ialah kandungan terperinci HTML5边玩边学（八）-砖块贴图点阵字. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
H5: Penambahbaikan utama dalam HTML5Apr 28, 2025 am 12:26 AMHTML5 membawa lima penambahbaikan utama: 1. Tag semantik meningkatkan kejelasan kod dan kesan SEO; 2. Sokongan multimedia memudahkan penyembuhan video dan audio; 3. Peningkatan Borang Memudahkan Pengesahan; 4. Offline dan storan tempatan meningkatkan pengalaman pengguna; 5. Fungsi kanvas dan grafik meningkatkan visualisasi laman web.
HTML5: Standard dan kesannya terhadap pembangunan webApr 27, 2025 am 12:12 AMCiri -ciri teras HTML5 termasuk tag semantik, sokongan multimedia, penyimpanan luar talian dan penyimpanan tempatan, dan peningkatan bentuk. 1. Tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Memudahkan penanaman multimedia dengan label. 3. Storan luar talian dan penyimpanan tempatan seperti ApplicationCache dan LocalStorage Sokongan Operasi Bebas Rangkaian dan Penyimpanan Data. 4. Peningkatan Borang Memperkenalkan Jenis Input dan Sifat Pengesahan Baru Untuk Memudahkan Pemprosesan dan Pengesahan.
Contoh Kod H5: Aplikasi Praktikal dan TutorialApr 25, 2025 am 12:10 AMH5 menyediakan pelbagai ciri dan fungsi baru, sangat meningkatkan keupayaan pembangunan front-end. 1. Sokongan Multimedia: Media Media Melalui dan Elemen, Tiada Plug-Ins diperlukan. 2. Kanvas: Gunakan elemen untuk menjadikan grafik dan animasi 2D secara dinamik. 3. Penyimpanan Tempatan: Melaksanakan penyimpanan data berterusan melalui LocalStorage dan sessionStorage untuk meningkatkan pengalaman pengguna.
Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AMH5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.
Blok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AMUnsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.
HTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AMTidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.
HTML5: Blok Bangunan Web Moden (H5)Apr 21, 2025 am 12:05 AMHTML5 adalah versi terkini bahasa markup hiperteks, yang diseragamkan oleh W3C. HTML5 memperkenalkan tag semantik baru, sokongan multimedia dan peningkatan bentuk, meningkatkan struktur web, pengalaman pengguna dan kesan SEO. HTML5 memperkenalkan tag semantik baru, seperti,, dan lain -lain, untuk menjadikan struktur laman web lebih jelas dan kesan SEO lebih baik. HTML5 menyokong elemen multimedia dan tiada pemalam pihak ketiga diperlukan, meningkatkan pengalaman pengguna dan kelajuan memuatkan. HTML5 meningkatkan fungsi bentuk dan memperkenalkan jenis input baru seperti, dan lain -lain, yang meningkatkan pengalaman pengguna dan membentuk kecekapan pengesahan.
Kod H5: Menulis HTML5 Bersih dan CekapApr 20, 2025 am 12:06 AMBagaimana cara menulis kod HTML5 yang bersih dan cekap? Jawapannya adalah untuk mengelakkan kesilapan biasa dengan tag semantik, kod berstruktur, pengoptimuman prestasi dan mengelakkan kesilapan biasa. 1. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Pastikan kod berstruktur dan boleh dibaca, menggunakan lekukan dan komen yang sesuai. 3. Mengoptimumkan prestasi dengan mengurangkan tag yang tidak perlu, menggunakan CDN dan kod pemampatan. 4. Elakkan kesilapan biasa, seperti tag tidak ditutup, dan pastikan kesahihan kod.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
