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>

    效果图如下

    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶顶
    顶顶顶顶  顶顶顶顶顶顶顶顶顶顶   顶顶顶顶顶   顶顶顶       顶顶
    顶顶顶             顶顶顶顶顶顶顶顶  顶顶顶顶顶顶顶顶 顶顶顶顶
    顶顶顶             顶顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶  顶顶顶顶   顶顶顶顶顶顶        顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶                顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶    顶顶顶顶顶顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶     顶顶顶顶顶   顶    顶顶顶顶   顶顶顶顶顶顶
    顶 顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶    顶 顶顶  顶顶顶顶顶顶顶
    顶           顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶顶顶
    顶顶         顶顶顶顶顶顶顶顶     顶顶      顶顶顶顶顶顶顶
    顶顶顶       顶顶顶顶顶顶       顶顶顶顶       顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶       顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶顶      顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶    顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                                              
  • 相关阅读:
    NFS挂载报错
    关于git的reset指令说明-soft、mixed、hard
    nginx关于限制请求数和连接数
    Jenkins初级使用过程中的异常处理(1)
    Jenkins的初级应用(2)-Invoke Phing targets
    Jenkins的初级应用(1)-Publish Over SSH
    解决Jenkins安装的时区问题
    用Ubuntu快速安装Jenkins
    TIME_WAIT状态过多的排查
    在linux环境下用中文查询数据库
  • 原文地址:https://www.cnblogs.com/xiaobuild/p/2119225.html
Copyright © 2011-2022 走看看