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>

    效果图如下

    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶顶
    顶顶顶顶  顶顶顶顶顶顶顶顶顶顶   顶顶顶顶顶   顶顶顶       顶顶
    顶顶顶             顶顶顶顶顶顶顶顶  顶顶顶顶顶顶顶顶 顶顶顶顶
    顶顶顶             顶顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶  顶顶顶顶   顶顶顶顶顶顶        顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶                顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶    顶顶顶顶顶顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶     顶顶顶顶顶   顶    顶顶顶顶   顶顶顶顶顶顶
    顶 顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶    顶 顶顶  顶顶顶顶顶顶顶
    顶           顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶顶顶
    顶顶         顶顶顶顶顶顶顶顶     顶顶      顶顶顶顶顶顶顶
    顶顶顶       顶顶顶顶顶顶       顶顶顶顶       顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶       顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶顶      顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶    顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                                              
  • 相关阅读:
    Unable to connect to web server 'IIS Express'(无法连接到Web服务器“IIS Express”)的解决方式-Jexus Manager
    temp_web
    使用Fluent配置表关系
    面试题链接记录
    面试题
    SQL语言基础
    .net core中DbProviderFactories配置问题
    Swagger UI in AspNetCore WebAPI
    JS实现国密算法SM2加密,后端Java解密
    Java读取磁盘指定扇区
  • 原文地址:https://www.cnblogs.com/xiaobuild/p/2119225.html
Copyright © 2011-2022 走看看