Как исправить соотношение пикселей на холсте с измененным размером - PullRequest
Новая
       16

Как исправить соотношение пикселей на холсте с измененным размером

0 голосов
/ 25 апреля 2020

У меня есть измененный (полноэкранный) холст, который содержит различные виды функций. Он также содержит текст. Текст становится размытым, когда я вижу его на экране. Я пробовал разные вещи, чтобы исправить это с помощью разных уроков. Я нашел примеры того, как настроить холст, чтобы он также хорошо смотрелся на HI Dpi-экранах, хотя я не могу найти правильный способ адаптировать любое возможное решение к моему коду. Я только начинаю пытаться выяснить Javascript, но думаю, что решение не за горами!

Кто-нибудь может помочь? Я был бы всегда благодарен. Ниже приведен код моего холста. 


if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas, context, tool;

  function init () {
    canvas = document.getElementById('imageView');

    var gl = canvas.getContext("2d");

    resize(gl.canvas);

    if (!canvas.getContext) {
      return;
    }

    context = canvas.getContext('2d');
    if (!context) {
      return;
    }

    context.strokeStyle = 'orange';
    context.lineWidth = 3;

    tool = new tool_pencil();

    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);

    context.fillStyle = "black";
    context.font = "1.5vw MaldenSans-Regular";
    context.textBaseline = "bottom";
    context.wrapText("Something\nelse",620,140,700,25);
    context.wrapText("hello",1110,140,700,25);
    context.wrapText("Something\nelse",185,300,700,25);
  }

  function resize(canvas) {
    var displayWidth  = canvas.clientWidth;
    var displayHeight = canvas.clientHeight;

    if (canvas.width  !== displayWidth ||
        canvas.height !== displayHeight) {

      canvas.width  = displayWidth;
      canvas.height = displayHeight;
    }
  }

  function tool_pencil () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };

    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
      }
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  init();
...