Forum PHP.pl > Rysowanie w canvas

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Rysowanie w canvas - problem z wymiarami

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

pioncz

6.12.2012, 15:33:57

Witam,
Od niedawna próbuję swoich sił z rysowaniem na elemencie canvas i wpadłem na problem, którego nie mogę rozwiązać. Kiedy rysuję za pomocą np fillrect(x,y, width, height) to parametry width i height zależą od rozmiaru elementu canvas. Chciałem zrobić aplikację wyświetlającą się w całym oknie przeglądarki i przy zmianie rozmiaru okna, element canvas też zmienia swoje wymiary. Oto przykładowy kod z moim problemem, wyświetlane elementu w myCanvas i myCanvas2 powinny mieć teoretycznie takie same wymiary:

[HTML] pobierz, plaintext 
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
         <script type="text/javascript">
            function draw() { 
                var canvas = document.getElementById('myCanvas');
                var ctx = canvas.getContext('2d');
                ctx.fillStyle   = '#00f';
                ctx.fillRect  (0, 0,100, 100);
                var canvas2 = document.getElementById('myCanvas2');
                var ctx2 = canvas2.getContext('2d');
                ctx2.fillStyle   = '#0f0';
                ctx2.fillRect  (0, 0, 100, 100);
            }
         </script>
        </head>
            <body onLoad="draw();">
                <canvas id="myCanvas" style="background:black;width:500px;height:500px;display:block;position:absolute;t
op:0px;left:0px;">
                </canvas>
                <canvas id="myCanvas2" style="background:purple;width:100px;height:100px;display:block;position:absolute;
top:0px;left:0px;">
                </canvas>
        	</body>
        </html>
[HTML] pobierz, plaintext

!*!

6.12.2012, 15:47:06

Cytat(pioncz @ 6.12.2012, 15:33:57 )

...wyświetlane elementu w myCanvas i myCanvas2 powinny mieć teoretycznie takie same wymiary....

Nie, ponieważ rysowane elementy są względem płótna, czyli w tym przypadku całego obiektu canvas.

pioncz

6.12.2012, 15:56:33

Jak są liczone te argumenty względem wys. i szer. obiektu canvas?

!*!

6.12.2012, 16:09:39

http://www.w3schools.com/html/html5_canvas.asp

Wartości width/height musza być ustalone dla płótna. Ustawienie ich w sekcji style sprawia że elementy w nim się znajdujące są do nich zastosowane względem nich.

IMO ktoś z tym nawalił i w CSS3 powinien być osobny selektor który by to regulował.

pioncz

6.12.2012, 16:30:15

Dzięki wielkie. Zaraz zabieram się do pracy : )

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.