Рисунки на холсте, как линии, размыты - PullRequest
Новая
       5

Рисунки на холсте, как линии, размыты

40 голосов
/ 02 января 2012

У меня есть <div style="border:1px solid border;" /> и холст, который рисуется с использованием: 

context.lineWidth = 1;
context.strokeStyle = "gray";

Рисунок выглядит довольно размытым (lineWidth меньше единицы создает еще худшую картинку), и ничего рядом с границей div.Можно ли получить то же качество рисования, что и HTML, используя canvas?

var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();
div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}
<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>
</table>

Ответы [ 6 ]

60 голосов
/ 25 июля 2013

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

Попробуйте это: 

<canvas id="preview" width="640" height="260"></canvas>

согласно моему сообщению: HTMLРазмытые холст изображения

49 голосов
/ 08 ноября 2012

Еще проще исправить это просто использовать это: 

context = canvas.context2d;    
context.translate(0.5, 0.5);

С этого момента ваши координаты должны корректироваться на 0,5 пикселя.

41 голосов
/ 02 января 2012

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

вместо этого: 

context.moveTo(10, 0);
context.lineTo(10, 30);

сделать это: 

context.moveTo(10.5, 0);
context.lineTo(10.5, 30);

Погрузитесь в холст HTML5, об этом красиво рассказывается
(найдите коробку «ЗАПРОСИТЬ ПРОФЕССОР» примерно на 1/4 пути вниз)

7 голосов
/ 25 октября 2017

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

Небольшое резюме:

Сначала вам нужно установить размер холста в два раза больше, чем вы хотите, например: 

canvas = document.getElementById('myCanvas');
canvas.width = 200;
canvas.height = 200;

Затем с помощью CSS вы устанавливаете желаемый размер: 

canvas.style.width = "100px";
canvas.style.height = "100px";

И, наконец, вы масштабируете контекст рисования на 2: 

canvas.getContext('2d').scale(2,2);
5 голосов
/ 23 апреля 2018

Линии размыты, поскольку холст виртуальный размер увеличен до его HTML-элемент фактический размер . Чтобы преодолеть эту проблему, вам нужно настроить виртуальный размер холста перед рисованием: 

function Draw () {
	var e, surface;
	e = document.getElementById ("surface");
	/* Begin size adjusting. */
	e.width = e.offsetWidth;
	e.height = e.offsetHeight;
	/* End size adjusting. */
	surface = e.getContext ("2d");
	surface.strokeRect (10, 10, 20, 20);
}
window.onload = Draw ()
<!DOCTYPE html>
<html>
<head>
<title>Canvas size adjusting demo</title>
</head>
<body>
<canvas id="surface"></canvas>
</body>
</html>

HTML:

1 голос
/ 24 января 2017

Чтобы избежать этой проблемы в анимации Я хотел бы поделиться небольшой демонстрацией .

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

HTML: 

<canvas id="canvas" width="600" height="600"></canvas>

CSS: 

  html, body{
    height: 100%;
  }
  body{
    font-family: monaco, Consolas,"Lucida Console", monospace;
    background: #000;
  }

  canvas{
    position: fixed;
    top: 0;
    left: 0;
    transform: translateZ(0);
  }

JS: 

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  ctx.translate(0.5, 0.5);

  var i = 0;
  var iInc = 0.005;
  var range = 0.5;

  raf = window.requestAnimationFrame(draw);

  function draw() {
    var animInc = EasingFunctions.easeInQuad(i) * 250;
    ctx.clearRect(0, 0, 600, 600);
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = '#fff';
    var rectInc = 10 + animInc;

    // Avoid Half Pixel
    rectIncFloat = rectInc % 1; // Getting decimal value.
    rectInc = rectInc - rectIncFloat; // Removing decimal.

    // console.log(rectInc);
    ctx.rect(rectInc, rectInc, 130, 60);
    ctx.stroke();
    ctx.closePath();

    ctx.font = "14px arial";
    ctx.fillStyle = '#fff';
    ctx.textAlign = 'center';
    ctx.fillText("MAIN BUTTON", 65.5 + rectInc, 35.5 + rectInc);

    i += iInc;

    if (i >= 1) {
      iInc = -iInc;
    }
    if (i <= 0) {
      iInc = Math.abs(iInc);
    }

    raf = window.requestAnimationFrame(draw);
  }


  // Easing
  EasingFunctions = {
    // no easing, no acceleration
    linear: function(t) {
      return t
    },
    // accelerating from zero velocity
    easeInQuad: function(t) {
      return t * t
    },
    // decelerating to zero velocity
    easeOutQuad: function(t) {
      return t * (2 - t)
    },
    // acceleration until halfway, then deceleration
    easeInOutQuad: function(t) {
      return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
    },
    // accelerating from zero velocity 
    easeInCubic: function(t) {
      return t * t * t
    },
    // decelerating to zero velocity 
    easeOutCubic: function(t) {
      return (--t) * t * t + 1
    },
    // acceleration until halfway, then deceleration 
    easeInOutCubic: function(t) {
      return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
    },
    // accelerating from zero velocity 
    easeInQuart: function(t) {
      return t * t * t * t
    },
    // decelerating to zero velocity 
    easeOutQuart: function(t) {
      return 1 - (--t) * t * t * t
    },
    // acceleration until halfway, then deceleration
    easeInOutQuart: function(t) {
      return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t
    },
    // accelerating from zero velocity
    easeInQuint: function(t) {
      return t * t * t * t * t
    },
    // decelerating to zero velocity
    easeOutQuint: function(t) {
      return 1 + (--t) * t * t * t * t
    },
    // acceleration until halfway, then deceleration 
    easeInOutQuint: function(t) {
      return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t
    }
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...