小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[代码]0、1像素显示字符串
  • 首页 > 前端
  • 作者:小昱
  • 2017年8月7日 18:02 星期一
  • 浏览:146
  • 字号:
  • 评论:0
  • HTML

    <canvas id="canvas"></canvas>

    JavaScript - 原生

    window.onload = function() {
        var c = document.getElementsByTagName('canvas')[0];
        var ctx = c.getContext('2d');
        var WIDTH = c.width = window.innerWidth;
        var HEIGHT = c.height = window.innerHeight;
        var img;
        var init = function() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            ctx.font = 'bold 144px arial';
            ctx.fillStyle = 'rgba(255,255,255,0.5)';
            ctx.fillText('Hello World', 60, HEIGHT / 2 + 50);
            img = ctx.getImageData(0, 0, WIDTH, HEIGHT);
        }
    
        var run = function() {
            ctx.font = 'bold 5px arial';
            ctx.fillStyle = 'rgba(0,0,0,1)';
            for (var i = 1; i <= WIDTH / 8; i++) {
                for (var j = 1; j <= HEIGHT / 20; j++) {
                    if (img.data[(Math.round(j * 10 + HEIGHT * 0.25 - 1) * WIDTH + i * 8) * 4]) {
                        ctx.fillText('0', i * 8, j * 10 + HEIGHT * 0.25);
                    } else {
                        ctx.fillText('1', i * 8, j * 10 + HEIGHT * 0.25);
                    }
                }
            }
    
        }
        init();
        run();
        document.onclick = function() {
            init();
            run();
        }
    }

    JavaScript - 封装

     class DrawTextCanvas {
        constructor({canvas = '', text = ''}) {
            this.canvas = document.querySelector(canvas)
            this.text = text
            this.ctx = this.canvas.getContext('2d')
            this.width = this.canvas.width = window.innerWidth
            this.height = this.canvas.height = window.innerHeight
            this.init()
            this.run()
        }
        init () {
            this.ctx.clearRect(0, 0, this.width, this.height);
            this.ctx.font = 'bold 144px arial';
            this.ctx.fillStyle = 'rgba(255,255,255,0.5)';
            this.ctx.fillText(this.text, 60, this.height / 2 + 50);
            this.img = this.ctx.getImageData(0, 0, this.width, this.height)
        }
        run () {
            this.ctx.font = 'bold 5px arial';
            this.ctx.fillStyle = 'rgba(0,0,0,1)';
            for (let i = 1; i <= this.width / 8; i++) {
                for (let j = 1; j <= this.height / 20; j++) {
                    if (this.img.data[(Math.round(j * 10 + this.height * 0.25 - 1) * this.width + i * 8) * 4]) {
                        this.ctx.fillText('0', i * 8, j * 10 + this.height * 0.25);
                    } else {
                        this.ctx.fillText('1', i * 8, j * 10 + this.height * 0.25);
                    }
                }
            }
        }
     }
    
     let cvs = new DrawTextCanvas({
        canvas: '#canvas',
        text: 'Hello world'
     })

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [代码]0、1像素显示字符串
    本文地址:http://www.xiaoyulive.top/?post=116
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号