- From: poot <cvsmail@w3.org>
- Date: Fri, 11 Sep 2009 18:51:56 +0900 (JST)
- To: public-html-diffs@w3.org
hixie: <canvas> example. (whatwg r3810)
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2978&r2=1.2979&f=h
http://html5.org/tools/web-apps-tracker?from=3809&to=3810
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2978
retrieving revision 1.2979
diff -u -d -r1.2978 -r1.2979
--- Overview.html 11 Sep 2009 09:32:13 -0000 1.2978
+++ Overview.html 11 Sep 2009 09:51:29 -0000 1.2979
@@ -584,7 +584,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>
@@ -741,13 +742,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>
@@ -23630,7 +23631,49 @@
over the current canvas bitmap using the current composition
operator.</li>
- </ol></div><div class="impl">
+ </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>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>
@@ -39869,7 +39912,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><div class="example">
+ </dl><h5 id="examples-0"><span class="secno">5.4.2.1 </span>Examples</h5><div class="example">
<p>Here is a long example <code title="md-vcard"><a href="#md-vcard">vcard</a></code> for a
fictional character called "Jack Bauer":</p>
@@ -40455,7 +40498,7 @@
</ul></li>
- </ol><h5 id="examples-0"><span class="secno">5.4.3.1 </span>Examples</h5><!-- get more from http://www.ietf.org/rfc/rfc2445.txt --><div class="example">
+ </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 --><div class="example">
<p>Here is an example of a page that uses the <code title="md-vevent"><a href="#md-vevent">vevent</a></code> vocabulary to mark up an event:</p>
@@ -40580,7 +40623,7 @@
</dd>
</dl><p>In addition, exactly one property with the name <code title="md-about"><a href="#md-about">about</a></code> must be present within each <a href="#concept-item" title="concept-item">item</a> with the type <code title="md-work"><a href="#md-work">work</a></code>, giving the <a href="#url">URL</a> of the
- work.<h5 id="examples-1"><span class="secno">5.4.4.1 </span>Examples</h5><div class="example">
+ work.<h5 id="examples-2"><span class="secno">5.4.4.1 </span>Examples</h5><div class="example">
<p>This example shows an embedded image entitled <cite>My
Pond</cite>, licensed under the Creative Commons Attribution-Share
Received on Friday, 11 September 2009 09:52:32 UTC