JavaScript http://kohnlehome.de/html/canvas.pdf
Canvas
1 HTML-Element
< c a n v a s id =" z e i c h e n b r e t t " w i d t h =" 400 " h e i g h t =" 300 "> </ canvas >
2 Zeichnen mit JavaScript
2.1 Kontext zum Zeichnen
var c a n v = d o c u m e n t . g e t E l e m e n t B y I d (" z e i c h e n b r e t t ") ; var c o n t e x t = c a n v . g e t C o n t e x t (" 2 d ") ;
2.2 Farbe
f a r b e = " o r a n g e "; // F a r b b e z e i c h n e r f a r b e = " # f f f f f f "; // H e x w e r t e
f a r b e = " rgb ( 2 5 5 , 2 5 5 , 2 5 5 ) "; // rot , gruen , b l a u j e w e i l s von 0 -255 f a r b e = " r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 5 ) "; // mit T r a n s p a r e n z von 0.0 bis 1.0
2.3 Zeichenstift
c o n t e x t . l i n e W i d t h = 5;
c o n t e x t . s t r o k e S t y l e = f a r b e ;
2.4 Pinsel
c o n t e x t . f i l l S t y l e = f a r b e ;
2.5 Zeichnen
2.5.1 Rechteck zeichnen
c o n t e x t . s t r o k e R e c t ( x , y , breite , h o e h e ) ;
2.5.2 Rechteck f¨ ullen
c o n t e x t . f i l l R e c t ( x , y , breite , h o e h e ) ;
2.5.3 Rechteck l¨ oschen
c o n t e x t . c l e a r R e c t ( x , y , breite , h o e h e ) ;
2.5.4 Linie zeichnen
c o n t e x t . b e g i n P a t h () ; c o n t e x t . m o v e T o ( x , y ) ; c o n t e x t . l i n e T o ( x , y ) ; c o n t e x t . s t r o k e () ; c o n t e x t . c l o s e P a t h () ;
2.5.5 Text zeichnen
c o n t e x t . f o n t = " b o l d 40 px m o n o s p a c e ";
c o n t e x t . s t r o k e T e x t (" T e x t ",x , y ) ; // R a n d c o n t e x t . f i l l T e x t (" T e x t ",x , y ) ; // F u e l l u n g
2.5.6 Kreisbogen zeichnen
c o n t e x t . b e g i n P a t h () ;
c o n t e x t . arc ( x , y , radius , s t a r t W i n k e l , e n d W i n k e l , g e g e n U h r z e i g e r ) ; c o n t e x t . s t r o k e () ;
c o n t e x t . f i l l () ; c o n t e x t . c l o s e P a t h () ;
