User:Nicole Hametner/canvas: Difference between revisions

Latest revision as of 16:17, 14 October 2012

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

   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;
   }

} </canvas>

@@ Line 1: / Line 1: @@
-See also [[Canvas]].
+[[File:hello canvas stars.png]]
-A basic coding control structure is the loop which takes it's simplest form as:
+<canvas id="c1" showsrc>
+function draw() {
- while CONDITION {
+     c = document.getElementById("c");
-     LOOP
+     p = c.getContext("2d");
-     LOOP
-    LOOP...
+  	p.strokeStyle="rgb(0,255,0)"
- }
+	p.lineWidth   = 3;
+	p.shadowOffsetX = 5;
-The condition should be some kind of "boolean" expression that is "true" for a while, and eventually "false" when the loop should stop running.
+	p.shadowOffsetY = 8;
+	p.shadowColor   = "rgb(0, 255, 255)";
-<canvas id="c1" showsrc>
+  	star=0;
-function draw(){
+    p.beginPath();
-  c = document.getElementById("c1")
-  //console.log("c is",c)
+    while(star < 7) {
-  p = c.getContext("2d")
+    x = star * 90;
-  x = 10
+    y = star * 40;
-  while (x<250) {
+    p.moveTo(-45+x,30+y);
-     p.strokeRect(x,100,20,40)
+    p.lineTo(45+x,45+y);
-     x+=60
+    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>