I disegni su canvas, come le linee, sono sfocati

Ho un

e canvas, che viene disegnato usando:

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

Il disegno sembra abbastanza sfocato (la larghezza della riga inferiore a quella crea un’immagine ancora peggiore) e nulla vicino al bordo del div. È ansible ottenere la stessa qualità di disegno dell’HTML usando la 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;} 
 
Line on canvas:1px border:
 

Quando si disegnano linee su canvas, è effettivamente necessario cavalcare i pixel. È stata una scelta bizzarra nell’API secondo me, ma facile da usare:

Invece di questo:

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

Fai questo:

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

tuffarsi nel capitolo sulla canvas di HTML5 parla bene di questo
(cerca la casella ‘ASK PROFESSOR MARKUP’ a circa 1/4 della discesa)

Ho scoperto che l’impostazione della dimensione della canvas in CSS ha causato la visualizzazione delle mie immagini in modo sfocato.

Prova questo:

  

come per il mio post: HTML Blurry Canvas Images

Una soluzione ancora più semplice è usare semplicemente questo:

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

Da qui in poi le tue coordinate dovrebbero essere regolate da quel 0.5 pixel.

Uso un display retina e ho trovato una soluzione che ha funzionato per me qui .

Piccolo riassunto:

Per prima cosa è necessario impostare la dimensione della canvas due volte più grande di quella desiderata, ad esempio:

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

Quindi, usando il CSS, si imposta la dimensione desiderata:

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

E infine ridimensiona il contesto di disegno per 2:

 canvas.getContext('2d').scale(2,2); 

Per evitare questo problema in animazione vorrei condividere una piccola demo .

Fondamentalmente sto controllando i valori di incremento ogni volta e saltando in un set di 1px rimuovendo i valori float.

HTML:

  

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 } } 

Le linee sono sfocate perché le dimensioni virtuali del canvas sono ridotte alle dimensioni effettive dell’elemento HTML. Per ovviare a questo problema è necessario modificare le dimensioni virtuali del canvas prima di disegnare:

 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 () 
    Canvas size adjusting demo