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

StackOverflow https://stackoverflow.com/questions/3991113

Вопрос

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

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

Это было полезно?

Решение

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

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

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

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

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

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

То, как я это делаю, состоит в том, чтобы установить элемент холста на ширину и высоту в 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");

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top