HTML5 холст () толстый и нечеткий - PullRequest
Новая
       37

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

28 голосов
/ 21 октября 2010

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

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

Ответы [ 7 ]

59 голосов
/ 12 октября 2012

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

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

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES
36 голосов
/ 21 октября 2010

По какой-то причине ваш холст растягивается.Поскольку у вас есть свойство 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');
    //...
10 голосов
/ 18 февраля 2016

Как я это делаю, это устанавливаю элемент 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");
3 голосов
/ 21 мая 2014

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

var context = canvas.getContext('2d');
context.scale(2,2);
3 голосов
/ 21 октября 2010

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

2 голосов
/ 21 января 2015

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

0 голосов
/ 31 августа 2014

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

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

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

...