Szerokość i wysokość płótna w HTML5


181

Czy można naprawić szerokość i wysokość canvaselementu HTML5 ?

Zwykły sposób jest następujący:

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

Odpowiedzi:


380

Element canvasDOM ma .heighti .widthwłaściwości, które odpowiadają atrybutom height="…"i width="…". Ustaw je na wartości liczbowe w kodzie JavaScript, aby zmienić rozmiar płótna. Na przykład:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

Pamiętaj, że ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);spowoduje to wyczyszczenie obszaru roboczego, ale należy postępować zgodnie z tymi przeglądarkami, które nie usuwają całkowicie obszaru roboczego. Po zmianie rozmiaru konieczne będzie przerysowanie treści, które mają być wyświetlane.

Zauważ też, że wysokość i szerokość są logicznymi wymiarami płótna używanymi do rysowania i różnią się od atrybutów style.heighti style.widthCSS. Jeśli nie ustawisz atrybutów CSS, rzeczywisty rozmiar płótna zostanie użyty jako jego rozmiar wyświetlania; jeśli ustawisz atrybuty CSS i różnią się one od wymiarów obszaru roboczego, zawartość zostanie przeskalowana w przeglądarce. Na przykład:

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

Zobacz ten przykład na żywo płótna powiększonego 4x.


1
@Hazaart Jeśli chcesz ustawić je inaczej: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});Jeśli chcesz, aby rozmiar wizualny był taki sam jak rozmiar w pikselach, nigdy nie ustawiaj stylów, tylko atrybuty.
Phrogz

1
„Jeśli chcesz, aby rozmiar wizualny był taki sam jak rozmiar w pikselach, nigdy nie ustawiaj stylów, tylko atrybuty”, czy istnieje powód tej preferencji? Jeśli mam wiele obiektów w obszarze roboczym i chcę powiększyć / pomniejszyć, znacznie szybciej byłoby zresetować css, nie? (Zamiast przechodzić przez wszystkie obiekty) ...
EnglishAdam

3
@ Gamemorize: powiększanie za pomocą CSS powoduje, że jest rozmazany. Można jednak powiększać za pomocą skalowania kontekstu i translacji między przerysowaniem zamiast zmieniać „rozmiar” każdego obiektu.
Phrogz

1
Dziękuję bardzo. Widzę teraz, co robi CSS ... traktuje płótno „jak” obraz, skalowanie obrazu oczywiście nie jest tak dobre jak „ponowne rysowanie”!
EnglishAdam

3
Ponadto możesz teraz „wyczyścić powiększone piksele” zamiast „rozmyte powiększone piksele”, przynajmniej w Chrome, używając stylu „renderowanie obrazu: piksele” na płótnie. Skrzypną twoje skrzypce, aby pokazać różnicę: jsfiddle.net/donhatch/9bheb/1663
Don Hatch

62

Płótno ma 2 rozmiary, rozmiar pikseli w kanwie (jest to backststore lub drawingBuffer) i rozmiar wyświetlania. Liczbę pikseli ustawia się za pomocą atrybutów canvas. W HTML

<canvas width="400" height="300"></canvas>

Lub w JavaScript

someCanvasElement.width = 400;
someCanvasElement.height = 300;

Oddzielne są szerokość i wysokość stylu CSS płótna

W CSS

canvas {  /* or some other selector */
   width: 500px;
   height: 400px;
}

Lub w JavaScript

canvas.style.width = "500px";
canvas.style.height = "400px";

Prawdopodobnie najlepszym sposobem na wykonanie płótna 1x1 pikseli jest ZAWSZE STOSOWANIE CSS, aby wybrać rozmiar, a następnie napisanie odrobiny kodu JavaScript, aby liczba pikseli pasowała do tego rozmiaru.

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

Dlaczego to najlepszy sposób? Ponieważ działa w większości przypadków bez konieczności zmiany kodu.

Oto płótno w pełnym oknie:

A oto płótno jak pływak w akapicie

Oto płótno w sporym panelu sterowania

oto płótno jako tło

Ponieważ nie ustawiłem atrybutów, jedyną rzeczą, która zmieniła się w każdej próbce jest CSS (jeśli chodzi o płótno)

Uwagi:

  • Nie nakładaj ramek ani obicia na element płótna. Obliczanie wielkości do odjęcia od liczby wymiarów elementu jest kłopotliwe

Najlepsza odpowiedź, ten fragment powinien być standardową metodą kanwy DOM.
Rustypaper

23

Dziękuję Ci bardzo! Wreszcie rozwiązałem problem rozmytych pikseli za pomocą tego kodu:

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

Po dodaniu „półpiksela” można odblokować linie.


26
@UpTheCreek Jeśli narysujesz linię w obszarze roboczym, będzie ona wyglądała na paskudną, a następnie powinna, jakby była rozmyta. Umieszczając linie na pół pikselach (powiedzmy 50,5 zamiast 50), otrzymujesz ładną, czystą linię. Często odbywa się to za pomocą ctx.translate (0,5, 0,5) na samym początku kodu, abyś mógł później o nim zapomnieć
Johan

-2

Najlepszy sposób to zrobić:

<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.