Html5 Canvas 点阵字

原理：

1、将文字用 ctx.fillText 方法画到一块内存画布上，前景色为黑，背景色为白

2、读取画布的每一个像素，并用相应的符号代替，组成字符串

js代码：

View Code

 1         <script>
 2             var canvas;
 3             var ctx;
 4             $(function() {
 5                 if ($("canvas#myCanvas").length > 0) {
 6                     canvas = $("canvas#myCanvas")[0];
 7                     ctx = canvas.getContext("2d");
 8                 }
 9                 ctx.fillStyle = "rgba(255,0, 0,1)";
10                 ctx.fillRect(20, 20, 40, 40);
11                 ctx.fillStyle = "rgba(0, 0, 0,1)";
12                 ctx.font = "bolder 40px  隶书";
13                 ctx.textBaseline = 'top';
14                 ctx.fillText("顶", 20, 20);
15 
16                 Div1 = $("div");
17 
18                 for (y = 1; y < 40; y++) {
19                     for (x = 1; x < 40; x++) {
20                         imageData = ctx.getImageData(20 + x, 20 + y, 1, 1);
21                         if (imageData.data[0] == 0) {
22                             Div1.html(Div1.html() + "　");
23                         }
24                         else {
25                             Div1.html(Div1.html() + "顶");
26                         }
27                     }
28                     Div1.html(Div1.html() + "<br>");
29                 }
30             });
31         </script>

效果图如下

顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶　　　　　　　　　　　　　　　　　　　　　顶
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶　　　　　　　　　　　　　　　　　　　　　顶顶
顶顶顶顶　　顶顶顶顶顶顶顶顶顶顶　　　顶顶顶顶顶　　　顶顶顶　　　　　　　顶顶
顶顶顶　　　　　　　　　　　　　顶顶顶顶顶顶顶顶　　顶顶顶顶顶顶顶顶　顶顶顶顶
顶顶顶　　　　　　　　　　　　　顶顶顶顶顶顶顶　　　顶顶顶顶顶顶顶顶顶顶顶顶顶
顶顶顶　　顶顶顶顶　　　顶顶顶顶顶顶　　　　　　　　顶顶顶　　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　顶顶顶顶顶　　　　　　　　　　　　　　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　顶顶顶顶顶　　　　顶顶顶顶顶顶顶顶　　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　顶顶顶顶顶顶　　　顶顶顶顶顶顶顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　顶顶顶顶顶顶　　　顶顶　　　顶顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　顶顶顶顶顶顶　　　顶顶　　　　顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　　顶顶顶顶顶　　　顶顶　　　　顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　　顶顶顶顶顶　　　顶顶　　　　顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　　顶顶顶顶顶　　　顶顶　　　　顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　　顶顶顶顶顶　　　顶顶　　　顶顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶　　　　顶顶顶顶顶　　　顶顶　　　顶顶顶顶　　　顶顶顶顶顶顶
顶顶顶顶顶顶顶顶　　　　　顶顶顶顶顶　　　顶　　　　顶顶顶顶　　　顶顶顶顶顶顶
顶　顶顶顶顶顶　　　　　顶顶顶顶顶顶顶顶顶顶　　　　顶　顶顶　　顶顶顶顶顶顶顶
顶　　　　　　　　　　　顶顶顶顶顶顶顶顶顶　　　　　　　　　顶顶顶顶顶顶顶顶顶
顶顶　　　　　　　　　顶顶顶顶顶顶顶顶　　　　　顶顶　　　　　　顶顶顶顶顶顶顶
顶顶顶　　　　　　　顶顶顶顶顶顶　　　　　　　顶顶顶顶　　　　　　　顶顶顶顶顶
顶顶顶顶顶顶顶顶顶顶顶顶顶　　　　　　　　　顶顶顶顶顶顶顶　　　　　　　顶顶顶
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶　　　　　顶顶顶顶顶顶顶顶顶顶顶　　　　　　顶顶
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶　　　　顶
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

转载于:https://www.cnblogs.com/xiaobuild/archive/2011/07/28/2119225.html