accidente cerebrovascular HTML5 lienzo () de espesor y difusa

Question

Estoy tratando de permitir al usuario dibujar un rectángulo sobre la tela (como un cuadro de selección). Estoy recibiendo algunos resultados ridículos, pero luego me di cuenta de que incluso tratando el código de mi referencia aquí , consigo enormes líneas difusas y no sé qué.

se aloja en dylanstestserver.com/drawcss . el Javascript es en línea para que pueda comprobarlo. Estoy usando jQuery para simplificar conseguir las coordenadas del ratón.

Answer 1

Por alguna razón, el lienzo está estirado. Debido a que tiene su propiedad width CSS establece en 100%, que se extiende desde una especie de tamaño nativo. Es la diferencia entre el uso de la propiedad CSS width y el atributo width en la etiqueta <canvas>. Es posible que desee intentar usar un poco de Javascript para que se llene el visor ( ver jQuery .width () ):

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

Answer 2

El problema borrosa sucederá si utiliza CSS para definir la altura y la anchura de la lona en lugar de establecer la altura y la anchura en el elemento canvas.

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

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

Answer 3

La manera de hacerlo es fijar el elemento de lienzo para una anchura y altura en el css, y a continuación, la canvas.width = canvas.clientWidth y canvas.height = canvas.clientHeight

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

Answer 4

No se han indicado tamaño del lienzo en píxeles, por lo que se amplía. Es 300x150 aquí. Pruebe a establecer la anchura, altura

Answer 5

En las pantallas de retina también es necesario para la escala (además de la respuesta aceptada):

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

Answer 6

El tema css dimensionamiento mencionado en estos comentarios es correcta, pero otra cosa más sutil que puede hacer que las líneas borrosas es olvidar llamar a hacer una llamada a context.beginPath() antes de dibujar una línea. Sin llamar a esto, usted seguirá recibiendo una línea, pero no va a ser suavizadas que hace que la apariencia de líneas como una serie de pasos.

Answer 7

he encontrado la razón por la mía era borrosa era que había una ligera discrepancia entre la anchura de línea y el ancho de CSS.

Tengo tanto ancho de línea / parámetros de altura y anchura / altura asignada a mi lienzo css, porque tengo que mantener a sus dimensiones física estática, mientras que el aumento de sus dimensiones en línea para las pantallas retina.

Verificar los suyos son los mismos si se tiene una situación como la mía.