User:Nicole Hametner/canvas: Difference between revisions

Revision as of 16:02, 14 October 2012

See also Canvas.

A basic coding control structure is the loop which takes it's simplest form as:

while CONDITION {
   LOOP
   LOOP
   LOOP...
}

The condition should be some kind of "boolean" expression that is "true" for a while, and eventually "false" when the loop should stop running.

<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: @@
-<!DOCTYPE html>
+See also [[Canvas]].
-<html><head>
-<script>
+A basic coding control structure is the loop which takes it's simplest form as:
-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;
+ while CONDITION {
-     p.beginPath();
+     LOOP
+     LOOP
-     while(star < 7) {
+     LOOP...
-    x = star * 90;
+ }
-    y = star * 40;
-    p.moveTo(-45+x,30+y);
+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.lineTo(45+x,45+y);
-    p.lineTo(-35+x,90+y);
+<canvas id="c1" showsrc>
-    p.lineTo(10+x,0+y);
+function draw(){
-     p.lineTo(35+x,105+y);
+  c = document.getElementById("c1")
-     p.lineTo(-45+x,29+y);
+  //console.log("c is",c)
-    p.stroke();
+  p = c.getContext("2d")
-    star=star+1;
+  x = 10
-    }
+  while (x<250) {
+     p.strokeRect(x,100,20,40)
+     x+=60
+  }
 }
-</script>
+</canvas>
-</head>
-<body marginwidth="100" marginheight="100" onload="draw()">
-<canvas id="c" width="550" height="320" style="border: double blue 10px"></canvas>
-</body></html>