Upload
martin-kliehm
View
15.938
Download
2
Tags:
Embed Size (px)
DESCRIPTION
My presentation about the HTML5 canvas element at the Standards.Next Meetup in London, 27 June 2009. Current and future implementations of canvas in games, applications, and video.
Citation preview
Standards.Next:Standards.Next:HTML5 CanvasHTML5 Canvas
Martin Kliehm @kliehmMartin Kliehm @kliehmSenior Frontend Engineer. Senior Frontend Engineer. Namics.Namics. Photo: Spencer Eakin
http://www.flickr.com/photos/true2death/244309118/
What’s a canvas?
For IE: excanvas.js (limited)(Google) Gears
http://philip.html5.org/tests/canvas/suite/tests/results.htmlhttp://philip.html5.org/tests/canvas/suite/tests/results.html
http://flickr.com/photos/tais/2411643409/
You can draw on it.
Boring.
Better.
You can put photos on it.
<canvas id="canvas" width="500" height="350"> <img src="fallback.jpg" width="500" height="350" alt="Pulp Fiction Minifigs" /></canvas>
http://www.flickr.com/photos/minifig/72091618/
<script type="text/javascript"> var canvas = document.getElementById( 'canvas' ); if ( canvas.getContext ) { var ctx = canvas.getContext( '2d' ); ctx.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ); }</script>
http://flickr.com/photos/tais/2411643409/http://flickr.com/photos/energeticspell/2332820792/
You can do creative things with a canvas.
var canvas = document.getElementById('canvas');
if ( canvas.getContext ) { // Get the image object var img = document.images[0];
// Set canvas 2D context
var ctx = canvas.getContext( '2d' );
/* Draw image: drawImage( * image object, sx, sy, sWidth,
sHeight, * dx, dy, dWidth, dHeight) */
ctx.drawImage( img, 0, 0, img.width, img.height, 0, 0, img.width, img.height );
// Save current state ctx.save();
[...]
[...]
// Draw mirror image
// Restore saved state ctx.restore();
// Flip vertically: scale(x,y) ctx.scale( 1, -1 );
// Move beneath the original image ctx.translate( 0, -img.height );
// Draw mirror image ctx.drawImage(
img, 0, 0, img.width, img.height, 0, -img.height, img.width, img.height );
[...]
[...]
// Drawing the fading gradient // Restore saved state ctx.restore();
// Flip vertically: scale(x,y) ctx.scale( 1, -1 );
// Draw gradient var mirrorHeight = img.height * 0.5;
var gradient = ctx.createLinearGradient( 0, 0, 0, mirrorHeight );
gradient.addColorStop( 0, 'rgba( 0, 0, 0, 0.5 )' );
gradient.addColorStop( 1, 'rgba( 0, 0, 0, 1.0 )' );
// Fill rectangle with gradient
ctx.fillStyle = gradient;
ctx.rect( 0, 0, img.width, mirrorHeight );
ctx.fill();
}
You can distort it.
/* transform( * scaleX, skewY, skewX, scaleY, * translateX, translateY ) */
ctx.transform( 1, Math.PI * 2 / 18, 0, 1, 0, 0 );
What’s a canvas, really?
“It’s like havinga little Apple ][in your browser.”http://www.oblomovka.com/wp/2008/08/08/the-edge-at-sxsw/http://www.oblomovka.com/wp/2008/08/08/the-edge-at-sxsw/
css3-safari-coverflow-pbakaus.avihttp://paulbakaus.com/2008/05/31/coverflow-anyone/
http://hacks.mozilla.org/2009/06/3d-transforms-isocube/http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
http://radnan.public.iastate.edu/plotr/http://www.500null.com/?p=16
Manipulation.
http://www.ernestdelgado.com/archive/drag-and-drop-without-drag-and-drop/http://www.ernestdelgado.com/archive/drag-and-drop-without-drag-and-drop/
http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.htmlhttp://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
http://www.bluishcoder.co.nz/2008/09/javascript-space-invaders-emulator.html
Text.
http://myles.eftos.id.au/experiments/font_render.html
https://developer.mozilla.org/En/Drawing_text_using_a_canvas
http://www.cameronmoll.com/articles/cufon/http://cufon.shoqolate.com/generate/
http://bespin.mozilla.com
http://www.flickr.com/photos/tussenpozen/144712446/in/set-560609/http://www.paciellogroup.com/blog/?p=362http://esw.w3.org/topic/HTML/AddedElementCanvas
http://www.codeplex.com/MsaaVerify
Filters.
http://labs.pimsworld.org/2009/05/a-javascript-implementation-of-the-content-aware-image-resizing-algorithm/
Applications.
Applications.
http://openstreetmap.orghttp://ernestdelgado.com/public-tests/ canvas-gpsmap/
http://www.ernestdelgado.com/gmaps/canvas/ddemo1.html
http://www.borismus.com/canvas-vs-svg-performance/http://groups.google.com/group/Google-Maps-API/msg/3599cee1f7190e30
3D Canvas.
!=
http://flickr.com/photos/jerizm/2602242647/
http://www.blarnee.com/projects/cflow/http://www.ernestdelgado.com/archive/chromeflow/
http://aggpas.org/aggpas-demo.htmhttp://www.lomont.org/Math/Papers/2003/InvSqrt.pdf
http://en.wikipedia.org/wiki/Texture_mapping
http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html
http://www.flipcode.com/archives/3D_Graphics_on_Mobile_Devices-Part_3_Polygon_Graphics.shtml
jsgl.js
/* Apply the affine 3x4 matrix transform to point |p|. |p| should
* be a 3 element array, and |t| should be a 16 element array...
* Technically transformations should be a 4x4 matrix for
* homogeneous coordinates, but we're not currently using the
* extra abilities so we can keep things cheaper by avoiding the
* extra row of calculations.
*/
function applyRotation( t, p ) {
return {
x: t.e0 * p.x + t.e4 * p.y + t.e8 * p.z,
y: t.e1 * p.x + t.e5 * p.y + t.e9 * p.z,
z: t.e2 * p.x + t.e6 * p.y + t.e10 * p.z
};
}
Matrix Math.
http://lbi.lostboys.nl/blog/artikelen/canvas-in-full-3d/
http://tulrich.com/geekstuff/canvas/perspective.html
The future: real 3D.
http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension
http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimensionhttps://wiki.mozilla.org/Canvas:3D
http://blog.largeanimal.com/demo/http://www.youtube.com/watch?v=uofWfXOzX-g
http://code.google.com/apis/o3d/
Video.
https://developer.mozilla.org/samples/video/chroma-key/index.xhtml (Firefox 3.5 required)
http://people.opera.com/howcome/2007/video/svg/video-filter.svg (special version of Opera 9.5 required)
http://www.youtube.com/watch?v=ib_g7F6WKAA
http://labs.opera.com/news/2009/04/01/
Thank you.
twitter: @kliehmLinks: delicious.com/kliehm/standardsnextVideos: flic.kr/p/6AeoAT