Navigation Menu

Skip to content

Commit

Permalink
[e] (0) <canvas> example.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@3810 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Sep 11, 2009
1 parent c69336c commit 10cc53b
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 7 deletions.
64 changes: 57 additions & 7 deletions index
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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 -->

Expand Down Expand Up @@ -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>

Expand Down
49 changes: 49 additions & 0 deletions source
View file
Expand Up @@ -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">

Expand Down

0 comments on commit 10cc53b

Please sign in to comment.