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>

    效果图如下

    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                     顶顶
    顶顶顶顶  顶顶顶顶顶顶顶顶顶顶   顶顶顶顶顶   顶顶顶       顶顶
    顶顶顶             顶顶顶顶顶顶顶顶  顶顶顶顶顶顶顶顶 顶顶顶顶
    顶顶顶             顶顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶顶顶顶顶
    顶顶顶  顶顶顶顶   顶顶顶顶顶顶        顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶                顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶    顶顶顶顶顶顶顶顶    顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶   顶顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶    顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶    顶顶顶顶顶   顶顶   顶顶顶顶   顶顶顶顶顶顶
    顶顶顶顶顶顶顶顶     顶顶顶顶顶   顶    顶顶顶顶   顶顶顶顶顶顶
    顶 顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶    顶 顶顶  顶顶顶顶顶顶顶
    顶           顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶顶顶
    顶顶         顶顶顶顶顶顶顶顶     顶顶      顶顶顶顶顶顶顶
    顶顶顶       顶顶顶顶顶顶       顶顶顶顶       顶顶顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶         顶顶顶顶顶顶顶       顶顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶     顶顶顶顶顶顶顶顶顶顶顶      顶顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶    顶
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶                                              
  • 相关阅读:
    放假期间网站被挂马的解决办法
    放假期间网站被挂马的解决办法
    判断一个字符串中字母的个数(无视大小写)
    判断一个字符串中字母的个数(无视大小写)
    JSP 9 大内置对象详解
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    2019年企业数据生产力调研报告,90%的人都没看过
    2019年12月数据库流行度排行:前三甲高位收官 数据库重获增长趋势
  • 原文地址:https://www.cnblogs.com/xiaobuild/p/2119225.html
Copyright © 2011-2022 走看看