User:Nicole Hametner/canvas: Difference between revisions

Revision as of 17:15, 14 October 2012

<canvas id="c1" showsrc> function draw(){

 c = document.getElementById("c1")
 //console.log("c is",c)
 p = c.getContext("2d")
 x = 10
 while (x<250) {
   p.strokeRect(x,100,20,40)
   x+=60
 }

} </canvas>

@@ Line 1: / Line 1: @@
 [[File:hello canvas stars.png]]
-    c = document.getElementById("c");
+<canvas id="c1" showsrc>
-    p = c.getContext("2d");
+function draw(){
-  	p.strokeStyle="rgb(0,255,0)"
+  c = document.getElementById("c1")
-	p.lineWidth   = 3;
+  //console.log("c is",c)
-	p.shadowOffsetX = 5;
+  p = c.getContext("2d")
-	p.shadowOffsetY = 8;
+   x = 10
-	p.shadowColor   = "rgb(0, 255, 255)";
+   while (x<250) {
-  	star=0;
+     p.strokeRect(x,100,20,40)
-    p.beginPath();
+     x+=60
-    while(star < 7) {
+  }
-    x = star * 90;
+}
-    y = star * 40;
+</canvas>
-     p.moveTo(-45+x,30+y);
-    p.lineTo(45+x,45+y);
-    p.lineTo(-35+x,90+y);
-     p.lineTo(10+x,0+y);
-    p.lineTo(35+x,105+y);
-    p.lineTo(-45+x,29+y);
-    p.stroke();
-    star=star+1;