User:Nicole Hametner/canvas: Difference between revisions

Revision as of 16:02, 14 October 2012

<!DOCTYPE html> <html><head>

   c = document.getElementById("c");
   p = c.getContext("2d");
 	
 	p.strokeStyle="rgb(0,255,0)"

p.lineWidth = 3; p.shadowOffsetX = 5; p.shadowOffsetY = 8; p.shadowColor = "rgb(0, 255, 255)";

 	star=0;
   p.beginPath();
   
   while(star < 7) {
   x = star * 90;
   y = star * 40;
   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;
   }

} </script>

</head> <body marginwidth="100" marginheight="100" onload="draw()"> <canvas id="c" width="550" height="320" style="border: double blue 10px"></canvas> </body></html>

@@ Line 1: / Line 1: @@
+<!DOCTYPE html>
+<html><head>
-<canvas id="c1" showsrc>
+<script>
-function draw(){
+function draw() {
-  c = document.getElementById("c1")
+    c = document.getElementById("c");
-  //console.log("c is",c)
+    p = c.getContext("2d");
-   p = c.getContext("2d")
-  x = 10
+  	p.strokeStyle="rgb(0,255,0)"
-  while (x<250) {
+	p.lineWidth   = 3;
-     p.strokeRect(x,100,20,40)
+	p.shadowOffsetX = 5;
-     x+=60
+	p.shadowOffsetY = 8;
-  }
+	p.shadowColor   = "rgb(0, 255, 255)";
+  	star=0;
+    p.beginPath();
+    while(star < 7) {
+    x = star * 90;
+    y = star * 40;
+    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;
+    }
 }
-</canvas>
+</script>
-[[File:19_Hello_canvas.png]]
+</head>
+<body marginwidth="100" marginheight="100" onload="draw()">
+<canvas id="c" width="550" height="320" style="border: double blue 10px"></canvas>
+</body></html>