Question

我是JS的新手，所以我想在以下JS代码段中寻求有关渲染文本质量的帮助。我试图按照this question中的说明进行操作，但是代码超出了我的理解水平。

const canvas = document.getElementById('binary-canvas');
const ctx = canvas.getContext('2d');
let raf;

ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

ctx.font = '20px Arial';
ctx.fillStyle = '#444444';

const fontSize = 20;
const columns = Math.floor(canvas.width / fontSize);
const rows = Math.floor(canvas.height / fontSize);

const binChars = ['0', '1'];
const bits = [];
const bitHeight = fontSize;
const bitWidth = fontSize;

// Populate array of 'bits'
for(let r = 0; r < rows; r++) {
  for(let c = 0; c < columns; c++) {
    bits.push({
      x: c * bitWidth,
      y: r * bitHeight,
      value: binChars[Math.floor(Math.random() * binChars.length)],
      hasDrawn: false
    });
  }
}

// Vars for manually calculating frame rate
const fps = 10;
const interval = 1000/fps;
let now;
let then = Date.now();
let delta;

// Draw all bits once before starting animation
for(let bit of bits) {
  ctx.clearRect(bit.x, bit.y, bitWidth, bitHeight);
  ctx.fillText(bit.value, bit.x, bit.y + bitHeight);
  bit.hasDrawn = true;
}

function draw() {
  raf = window.requestAnimationFrame(draw);
  now = Date.now();
  delta = now - then;

  if (delta > interval) {
    for(let bit of bits) {
      if(bit.hasDrawn === true && (Math.random() * 100) > 95) { // If passes the randomness check
        let newVal = (bit.value === binChars[1]) ? binChars[0] : binChars[1];

        ctx.clearRect(bit.x, bit.y, bitWidth, bitHeight);
        ctx.fillText(newVal, bit.x, bit.y + bitHeight);
        bit.value = newVal;
      }
    }
    then = now - (delta % interval);
  }
}
draw();

您可以找到一个演示here。我正在使用HiDPI屏幕，所以不确定这是普遍问题还是仅限于HiDPI屏幕。

谢谢！

画布中的文字模糊

0 个答案: