Ход холста HTML5() толстый и нечеткий

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

он размещен на dylanstestserver.com/drawcss. javascript встроен, поэтому вы можете проверить его. Я использую jQuery для упрощения получения координат мыши.

Ответ 1

По какой-то причине ваш холст растянут. Поскольку у вашего свойства css width установлено значение 100%, он растягивает его из своего родного размера. Это разница между использованием свойства css width и атрибута width в теге <canvas>. Возможно, вы захотите попробовать немного javascript, чтобы заполнить область просмотра (см. JQuery.width()):

jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...

Ответ 2

Размытая проблема произойдет, если вы используете css для установки высоты и ширины холста вместо установки высоты и ширины в элементе canvas.

<style>
  canvas { height: 800px; width: 1200px; }      WRONG WAY -- BLURRY LINES
</style>

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES

Ответ 3

Я делаю это, чтобы установить элемент canvas в ширину и высоту в css, а затем установить canvas.width = canvas.clientWidth и canvas.height = canvas.clientHeight

var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");

Ответ 4

Вы не указали размер холста в пикселях, поэтому он масштабируется. Здесь 300x150. Попробуйте установить ширину, высоту

Ответ 5

На дисплеях сетчатки вам также необходимо масштабировать (в дополнение к принятому ответу):

var context = canvas.getContext('2d');
context.scale(2,2);

Ответ 6

Вопрос о размерах CSS, упомянутый в этих комментариях, верен, но еще одна более тонкая вещь, которая может вызвать размытые строки, - это забыть позвонить сделать вызов context.beginPath() до рисования строки. Не вызывая этого, вы все равно получите строку, но она не будет сглажена, что делает линию похожей на последовательность шагов.

Ответ 7

Я обнаружил, что причина размытости в том, что между шириной линии и шириной CSS было небольшое несоответствие.

У меня есть как встроенные параметры ширины/высоты, так и ширина/высота css, назначенные для моего холста, потому что мне нужно сохранять свои физические размеры статичными, увеличивая его встроенные размеры для экранов сетчатки.

Проверьте, что у вас такая же ситуация, как у меня.