Блог

Я сделал один экран, имитирующий классический экран Commodore 64. Я получаю границу вокруг мигающих символов. Как я мог промолчать об этом? Я еще не определил ни одного.

 <script>
    ctx.font = "21px Commodore64Angled";
    ctx.fillStyle = foreground1;
    for (var i = 0; i < chars[0].length; i  ) {
        ctx.fillText(chars[0].substr(i, 1).toUpperCase(), xCharCnt * 4   xCharCnt * i, yCharCnt * 4   (0   1) * 2 * yCharCnt - 2);
    }
    ctx.fillStyle = foreground2;
    for (var j = 1; j < 8; j  ) {
        for (var i = 0; i < chars[j].length; i  )
        ctx.fillText(chars[j].substr(i, 1).toUpperCase(), xCharCnt * 4   xCharCnt * i, yCharCnt * 4   (j   1) * 2 * yCharCnt - 2);
    }
    ctx.fillStyle = foreground1;
    for (var j = 8; j < 11; j  ) {
        for (var i = 0; i < chars[j].length; i  )
        ctx.fillText(chars[j].substr(i, 1).toUpperCase(), xCharCnt * 4   xCharCnt * i, yCharCnt * 4   (j   1) * 2 * yCharCnt - 2);
    }
    ctx.fillStyle = foreground3;
    for (var i = 0; i < chars[11].length; i  ) {
        ctx.fillText(chars[11].substr(i, 1).toUpperCase(), xCharCnt * 4   xCharCnt * i, yCharCnt * 4   (j   1) * 2 * yCharCnt - 2);
    }
    // Zum Blinken bringen
    var backgr = background;
    var foregr = foreground3;
    setInterval(function() {
        if (foregr == foreground3) {
            backgr = foreground2;
            foregr = background;
        }
        else {
            backgr = background;
            foregr = foreground3;
        }
        ctx.fillStyle = backgr;
        ctx.fillRect(xCharCnt * (4   5)   1, yCharCnt * 28 - yCharCnt - 1, xCharCnt * 29, yCharCnt);
        for (var i = 0; i < chars[11].length; i  ) {
            ctx.fillStyle = foregr;
            ctx.fillText(chars[11].substr(i, 1).toUpperCase(), xCharCnt * 4   xCharCnt * i, yCharCnt * 4   (j   1) * 2 * yCharCnt - 2);
        }
    }, 300);
</script>
 

Взгляните на:

 ctx.fillRect(xCharCnt * (4   5)   1, yCharCnt * 27 - 1, xCharCnt * 29, yCharCnt);
 

Я был бы благодарен за любую идею. 🙂

Я нашел решение самостоятельно: я установил визуализацию в их соответствующую конструкцию if и определил, чтобы отображать на один пиксель больше в каждом направлении, чтобы черные границы, которые у меня есть, были переписаны. Вот результат:

 ctx.fillRect(xCharCnt * (4   5)   1 - 1, yCharCnt * 27 - 1 - 1, xCharCnt * 29   2, yCharCnt   2);