[html5] r3810 - [e] (0) <canvas> example.
whatwg at whatwg.org
whatwg at whatwg.org
Fri Sep 11 02:56:10 PDT 2009
Author: ianh
Date: 2009-09-11 02:56:09 -0700 (Fri, 11 Sep 2009)
New Revision: 3810
Modified:
index
source
Log:
[e] (0) <canvas> example.
Modified: index
===================================================================
--- index 2009-09-11 09:36:53 UTC (rev 3809)
+++ index 2009-09-11 09:56:09 UTC (rev 3810)
@@ -444,7 +444,8 @@
<li><a href=#text><span class=secno>4.8.11.1.9 </span>Text</a></li>
<li><a href=#images><span class=secno>4.8.11.1.10 </span>Images</a></li>
<li><a href=#pixel-manipulation><span class=secno>4.8.11.1.11 </span>Pixel manipulation</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.12 </span>Drawing model</a></ol></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.12 </span>Drawing model</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.13 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
@@ -601,13 +602,13 @@
<li><a href=#general><span class=secno>5.4.1 </span>General</a></li>
<li><a href=#vcard><span class=secno>5.4.2 </span>vCard</a>
<ol>
- <li><a href=#examples><span class=secno>5.4.2.1 </span>Examples</a></ol></li>
+ <li><a href=#examples-0><span class=secno>5.4.2.1 </span>Examples</a></ol></li>
<li><a href=#vevent><span class=secno>5.4.3 </span>vEvent</a>
<ol>
- <li><a href=#examples-0><span class=secno>5.4.3.1 </span>Examples</a></ol></li>
+ <li><a href=#examples-1><span class=secno>5.4.3.1 </span>Examples</a></ol></li>
<li><a href=#licensing-works><span class=secno>5.4.4 </span>Licensing works</a>
<ol>
- <li><a href=#examples-1><span class=secno>5.4.4.1 </span>Examples</a></ol></ol></li>
+ <li><a href=#examples-2><span class=secno>5.4.4.1 </span>Examples</a></ol></ol></li>
<li><a href=#converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</a>
<ol>
<li><a href=#json><span class=secno>5.5.1 </span>JSON</a></li>
@@ -26674,7 +26675,56 @@
</ol></div>
+ <h6 id=examples><span class=secno>4.8.11.1.13 </span>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>
+
+ <pre><canvas width="800" height="450"></canvas>
+<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);
+
+</script>
+
+
+
<div class=impl>
<h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
@@ -44520,7 +44570,7 @@
<a href=#url>URL</a>s are specified.</p>
<dd>
- </dl><h5 id=examples><span class=secno>5.4.2.1 </span>Examples</h5>
+ </dl><h5 id=examples-0><span class=secno>5.4.2.1 </span>Examples</h5>
<div class=example>
@@ -45124,7 +45174,7 @@
</ul></li>
- </ol><h5 id=examples-0><span class=secno>5.4.3.1 </span>Examples</h5>
+ </ol><h5 id=examples-1><span class=secno>5.4.3.1 </span>Examples</h5>
<!-- get more from http://www.ietf.org/rfc/rfc2445.txt -->
@@ -45266,7 +45316,7 @@
work.</p>
- <h5 id=examples-1><span class=secno>5.4.4.1 </span>Examples</h5>
+ <h5 id=examples-2><span class=secno>5.4.4.1 </span>Examples</h5>
<div class=example>
Modified: source
===================================================================
--- source 2009-09-11 09:36:53 UTC (rev 3809)
+++ source 2009-09-11 09:56:09 UTC (rev 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>
+
+ <pre><canvas width="800" height="450"></canvas>
+<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);
+
+</script></pre>
+
+
+
<div class="impl">
<h5>Color spaces and color correction</h5>
More information about the Commit-Watchers
mailing list