HTML5 Tracker

Short URL: http://html5.org/r/3810

Index: source
===================================================================
--- source	(revision 3809)
+++ source	(revision 3810)
@@ -29324,7 +29324,56 @@
   </div>
 
 
+  <h6>Examples</h6>
 
+  <p><i>This section is non-normative.</i></p>
+
+  <p>Here is an example of a script that uses canvas to draw pretty
+  glowing lines.</p>
+
+  &lt;pre>&lt;canvas width="800" height="450">&lt;/canvas>
+&lt;script>
+
+ var context = document.getElementsByTagName('canvas')[0].getContext('2d');
+
+ var lastX = context.canvas.width * Math.random();
+ var lastY = context.canvas.height * Math.random();
+ var hue = 0;
+ function line() {
+   context.save();
+   context.translate(context.canvas.width/2, context.canvas.height/2);
+   context.scale(0.9, 0.9);
+   context.translate(-context.canvas.width/2, -context.canvas.height/2);
+   context.beginPath();
+   context.lineWidth = 5 + Math.random() * 10;
+   context.moveTo(lastX, lastY);
+   lastX = context.canvas.width * Math.random();
+   lastY = context.canvas.height * Math.random();
+   context.bezierCurveTo(context.canvas.width * Math.random(),
+                         context.canvas.height * Math.random(),
+                         context.canvas.width * Math.random(),
+                         context.canvas.height * Math.random(),
+                         lastX, lastY);
+
+   hue = hue + 10 * Math.random();
+   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
+   context.shadowColor = 'white';
+   context.shadowBlur = 10;
+   context.stroke();
+   context.restore();
+ }
+ setInterval(line, 50);
+
+ function blank() {
+   context.fillStyle = 'rgba(0,0,0,0.1)';
+   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+ }
+ setInterval(blank, 40);
+
+&lt;/script></pre>
+
+
+
   <div class="impl">
 
   <h5>Color spaces and color correction</h5>

Previous | Next