zoukankan      html  css  js  c++  java
  • 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>

    效果图如下

    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶顶
    顶顶顶顶  顶顶顶顶顶顶顶顶顶顶   顶顶顶顶顶   顶顶顶       顶顶
    顶顶顶             顶顶顶顶顶顶顶顶  顶顶顶顶顶顶顶顶 顶顶顶顶
    顶顶顶             顶顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶  顶顶顶顶   顶顶顶顶顶顶        顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶                顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶    顶顶顶顶顶顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶     顶顶顶顶顶   顶    顶顶顶顶   顶顶顶顶顶顶
    顶 顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶    顶 顶顶  顶顶顶顶顶顶顶
    顶           顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶顶顶
    顶顶         顶顶顶顶顶顶顶顶     顶顶      顶顶顶顶顶顶顶
    顶顶顶       顶顶顶顶顶顶       顶顶顶顶       顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶       顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶顶      顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶    顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                                              
  • 相关阅读:
    Android Toast效果
    禁锢的思维
    偶遇makeblock
    发疯,宁愿一年少赚10万也不想和芯片打交道了
    Linux物理内存相关数据结构
    字符设备驱动框架
    Linux在IA-32体系结构下的地址映射
    使用busybox构建根文件系统
    在内容长页处动态增加滚动的返回头部图标
    用IE滤镜实现多种常用的CSS3效果
  • 原文地址:https://www.cnblogs.com/xiaobuild/p/2119225.html
Copyright © 2011-2022 走看看