Permalink
Browse files

[e] (0) <canvas> example.

git-svn-id: http://svn.whatwg.org/webapps@3810 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent c69336c commit 10cc53b53989bb96233e15ea0e067d39c86ad45a @Hixie Hixie committed Sep 11, 2009
Showing with 106 additions and 7 deletions.
  1. +57 −7 index
  2. +49 −0 source
View
64 index
@@ -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,6 +26675,55 @@ function AddCloud(data, x, y) { ... }</pre>
</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>
+
+ &lt;pre&gt;&lt;canvas width="800" height="450"&gt;&lt;/canvas&gt;
+&lt;script&gt;
+
+ 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&gt;
+
+
<div class=impl>
@@ -44520,7 +44570,7 @@ document.body.appendChild(outer);</pre>
<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 @@ document.body.appendChild(outer);</pre>
</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 @@ document.body.appendChild(outer);</pre>
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>
View
49 source
@@ -29324,6 +29324,55 @@ function AddCloud(data, x, y) { ... }</pre>
</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">

0 comments on commit 10cc53b

Please sign in to comment.