Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Rysowanie w canvas - problem z wymiarami
pioncz
post
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

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 
  1.         <html xmlns="http://www.w3.org/1999/xhtml">
  2.         <head>
  3.          <script type="text/javascript">
  4.             function draw() { 
  5.                 var canvas = document.getElementById('myCanvas');
  6.                 var ctx = canvas.getContext('2d');
  7.                 ctx.fillStyle   = '#00f';
  8.                 ctx.fillRect  (0, 0,100, 100);
  9.                 var canvas2 = document.getElementById('myCanvas2');
  10.                 var ctx2 = canvas2.getContext('2d');
  11.                 ctx2.fillStyle   = '#0f0';
  12.                 ctx2.fillRect  (0, 0, 100, 100);
  13.             }
  14.          </script>
  15.         </head>
  16.             <body onLoad="draw();">
  17.                 <canvas id="myCanvas" style="background:black;width:500px;height:500px;display:block;position:absolute;t
    op:0px;left:0px;"    >
  18.                 </canvas>
  19.                 <canvas id="myCanvas2" style="background:purple;width:100px;height:100px;display:block;position:absolute;
    top:0px;left:0px;"    >
  20.                 </canvas>
  21.         	</body>
  22.         </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
!*!
post
Post #2





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
pioncz
post
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

Jak są liczone te argumenty względem wys. i szer. obiektu canvas?
Go to the top of the page
+Quote Post
!*!
post
Post #4





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

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ł.

Ten post edytował !*! 6.12.2012, 16:23:32
Go to the top of the page
+Quote Post
pioncz
post
Post #5





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

Dzięki wielkie. Zaraz zabieram się do pracy : )
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 18:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn