Увеличьте разрешение холста HTML5

Я перепробовал все, что видел здесь, но, похоже, с моим кодом ничего не работает, или, может быть, я просто не знаю, как его применить.

Я пытаюсь улучшить разрешение своего HTML-холста, потому что прямоугольники выглядят немного «размытыми».

Вот мой код: html:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Canvas Resize</title>
    <style>
        canvas {
            border: 1px solid black;
        }

        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <canvas id = "sig-canvas" width = "1280" height = "739"></canvas>
    <p id = "timer"></p>
    <script src = "canvas.js"></script>
</body>
</html>

javascript:

var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");

var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
  mousePos = getMousePos(canvas, e);
    drawing = true;
}, false);

// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: mouseEvent.clientX - rect.left,
    y: mouseEvent.clientY - rect.top
  };
}

// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || 
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimaitonFrame ||
           function (callback) {
        window.setTimeout(callback, 1000/60);
           };
})();

// Draw to the canvas
function renderCanvas() {
  if (drawing) {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(mousePos.x, mousePos.y, 25, 25);

    ctx.strokeStyle = "#000000";
    ctx.lineWidth   = 2;
    ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
    lastPos = mousePos;
  }
}

// Allow for animation
(function drawLoop () {
  requestAnimFrame(drawLoop);
  renderCanvas();
})();

Вот моя рабочий пример: https://jsfiddle.net/8cp5qmob/

Спасибо!

javascript html html5-canvas

28.05.2018 14:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

6 358

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

У вас должен быть элемент canvas, использующий % для определения размера, чтобы он всегда был самым большим размером, который может быть на странице, что также должно помочь с разрешением

28.05.2018 15:41

Насколько я понимаю, они мне не кажутся размытыми. Но если вы хотите быть уверены, вы всегда можете заменить

ctx.fillStyle = "#FFFFFF"; & ctx.strokeStyle = "#000000";

С участием

ctx.fillStyle = "rgba(255, 255, 255, 1)"; & ctx.strokeStyle = "rgba(0, 0, 0, 1)";

Это должно сделать так, чтобы линия всегда имела максимальную непрозрачность.

28.05.2018 15:48

Ответ принят как подходящий

Чтобы увеличить разрешение вашего холста, у меня были хорошие результаты смешивания CSS (сколько пикселей он занимает на экране) с canvas.width и canvas.height (сколько пикселей он использует внутри). Это выглядит так:

CSS:

#sig-canvas {
     width: 1280px;
     height: 739px;
 }

JavaScript:

var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d")
var scale = 2;
canvas.width = 1280 * scale;
canvas.height = 739 * scale;

Сложность использования этой техники заключается в том, что вам нужно умножать или делить на масштаб при преобразовании экранных координат в координаты холста. В этом случае я преобразовал экранные координаты в координаты холста в getMousePos:

function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: (mouseEvent.clientX - rect.left) * scale,
    y: (mouseEvent.clientY - rect.top) * scale
  };
}

Вот фрагмент, который показывает все это вместе:

var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d")
var scale = 2;
canvas.width = 1280 * scale;
canvas.height = 739 * scale;

var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
  mousePos = getMousePos(canvas, e);
    drawing = true;
}, false);

// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: (mouseEvent.clientX - rect.left) * scale,
    y: (mouseEvent.clientY - rect.top) * scale
  };
}

// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || 
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimaitonFrame ||
           function (callback) {
        window.setTimeout(callback, 1000/60);
           };
})();

// Draw to the canvas
function renderCanvas() {
  if (drawing) {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(mousePos.x, mousePos.y, 25, 25);

    ctx.strokeStyle = "#000000";
    ctx.lineWidth   = 2;
    ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
    lastPos = mousePos;
  }
}

// Allow for animation
(function drawLoop () {
  requestAnimFrame(drawLoop);
  renderCanvas();
})();

#sig-canvas {
  width: 1280px;
  height: 739px;
}
canvas {
    border: 1px solid black;
}

body {
    margin: 0px;
}

<canvas id = "sig-canvas"></canvas>

Спасибо вам большое !! именно то, что я искал !!

— 28.05.2018 16:25

Могу я порекомендовать использовать ctx.scale?

— 10.11.2018 18:32

28.05.2018 16:05

Другие вопросы по теме

Изменить название входа в Keycloak

(Solidity + JS) Неперехваченная ошибка: недопустимое количество аргументов функции Solidity

Как добавить текст под фоновым изображением?

Как сделать JavaScript отпечатка пальца на стороне клиента

Макет родительского элемента w.r.t. ограничивающая рамка повернутого элемента

Сделать плавающие div'ы заполнять пробелы

Как печатать По умолчанию в альбомном режиме

Слайдер изображений страницы продукта в одной строке с темой предложения "shopify"

Только локальные шрифты не отображаются на iPhone и Mac моих коллег

HTML5 Video не всегда загружает видео

Увеличьте разрешение холста HTML5

Ответы 3

Другие вопросы по теме

Похожие вопросы