<canvas> Pixel præcision - JavaScript

Lær at tegne præcist på <canvas> så en streg bliver skarp i stedet for utydelige

Linjebredde og pixel præcision

Tegner man en streg på 1 pixel i bredden ved x = 100 så bliver linjen uskarp. Ligesom linjen yderst til venstre på dette canvas.

Browseren understøtter ikke <canvas>
Men hvorfor bliver linjen uskarp?

Det er fordi en linje på 1 pixel i bredden vokser en halv pixel til hver side så den tegnes fra 99,5 - 100,5.
Men da skærmen ikke kan vise 1 pixel på den måde så kommer den til at fylde 2 pixels på skærmen.

Tegner man i stedet linjen ved x = 100,5 så vil linjen blive skarp fordi den vil være fra 100 - 101 og dermed være præcis 1 pixel bred på skærmen.

HTML5 canvas linewidth og x

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.