Your SlideShare is downloading. ×
0
HTML5 Canvas
The canvas isa 2d bitmap.
No   layers.No   undo.No   objects.No   moving stuff.
http://rawkes.com/lab/google-balls-logo
http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html
How  can I create a c anvas?
HTML<canvas id="a">fallback txt</canvas>JavaScriptvar canvas =  document.getElementsById(a);var ctx = canvas.getContext(2d);
I draws quares.
con text  ctx.fillStyle = blue;  he ight  ctx.fillRect(0, 0, 150, 50);               x y width  ctx.strokeStyle = #c66;  c...
Iwant to d raw an    image!
create imagevar img = new Image();img.onload = function() { w hen loaded   ctx.drawImage(img, 0, 0);};                    ...
how can you  draw text?
css p ropertiesctx.font = bold 40px sans-serif;ctx.fillText(hello kitty, 5, 40);                            x  yhello kitty
bring methe pixels!
var w = canvas.width;var h = canvas.height;                                 new image arrayvar img = ctx.createImageData(w...
http://media.chikuyonok.ru/ambilight/
close pixealtehttp://desandro.com/resources/close-pixelate/
A nimation function ti             ck() {    doKeyboard(                );   updatePlaye               r();   doAI();   dr...
get       inputdraw           updateevery 30ms
function tick() {	 doKeyboard();	 updatePlayer();	 doAI();	 draw();  audio();}var fps = 30;setInterval(tick, 1000/fps);
How cani Save anImage?
var img = document.  getElementsByTagName(img)[0];var canvasImg =  canvas.toDataURL("image/png");                       re...
BrowserSupport   67%
http://weavesilk.com/
Summary Canvas<canvas> is a new 2d bitmap html element. you can draw primitives, imagesand pixels. There are no layers or ...
Material Used            Banksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/            Banksy “Flowi...
Material Used       3d teapot model http://resumbrae.com/ub/dms423_f08/10/ Metal Teapot http://www.flickr.com/photos/11273...
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
Upcoming SlideShare
Loading in...5
×

HTML5 Canvas - Let's Draw!

2,978

Published on

Let's take a look at the HTML5 element canvas. See how you can draw shapes and images, manipulate single pixels and even animate it. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,978
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Canvas - Let's Draw!"

  1. 1. HTML5 Canvas
  2. 2. The canvas isa 2d bitmap.
  3. 3. No layers.No undo.No objects.No moving stuff.
  4. 4. http://rawkes.com/lab/google-balls-logo
  5. 5. http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html
  6. 6. How can I create a c anvas?
  7. 7. HTML<canvas id="a">fallback txt</canvas>JavaScriptvar canvas = document.getElementsById(a);var ctx = canvas.getContext(2d);
  8. 8. I draws quares.
  9. 9. con text ctx.fillStyle = blue; he ight ctx.fillRect(0, 0, 150, 50); x y width ctx.strokeStyle = #c66; ctx.lineWidth = 1; ctx.strokeRect(0.5, 60.5, 150, 50);
  10. 10. Iwant to d raw an image!
  11. 11. create imagevar img = new Image();img.onload = function() { w hen loaded ctx.drawImage(img, 0, 0);}; x yimg.src = nakedrobot.png; image url
  12. 12. how can you draw text?
  13. 13. css p ropertiesctx.font = bold 40px sans-serif;ctx.fillText(hello kitty, 5, 40); x yhello kitty
  14. 14. bring methe pixels!
  15. 15. var w = canvas.width;var h = canvas.height; new image arrayvar img = ctx.createImageData(w, h);for (var x = 0; x < w; x++) { for (var y = 0; y < h; y++) { // each pixel has four values var idx = (x + y * w) * 4; // 0 red, 1 green, 2 blue, 3 alpha img.data[idx + 0] = x; img.data[idx + 1] = 255-x; img.data[idx + 2] = 0; img.data[idx + 3] = 255; }} resultctx.putImageData(img, 0, 0); write to canv as
  16. 16. http://media.chikuyonok.ru/ambilight/
  17. 17. close pixealtehttp://desandro.com/resources/close-pixelate/
  18. 18. A nimation function ti ck() { doKeyboard( ); updatePlaye r(); doAI(); draw(); audio(); }var fps = 3 0;setInterval (tick, 1000 /fps) ;
  19. 19. get inputdraw updateevery 30ms
  20. 20. function tick() { doKeyboard(); updatePlayer(); doAI(); draw(); audio();}var fps = 30;setInterval(tick, 1000/fps);
  21. 21. How cani Save anImage?
  22. 22. var img = document. getElementsByTagName(img)[0];var canvasImg = canvas.toDataURL("image/png"); returns “data:ima ge/png;base64,img.src = canvasImg; iVBORw0KGgoAAAA NS MgAAADICAYAAACt...” UhEU canvas image
  23. 23. BrowserSupport 67%
  24. 24. http://weavesilk.com/
  25. 25. Summary Canvas<canvas> is a new 2d bitmap html element. you can draw primitives, imagesand pixels. There are no layers or object. If a pixel gets a new color, theold color is overwritten and lost.A canvas is not “sandboxed” like flash and can be accessed and drawn onwith javascript.
  26. 26. Material Used Banksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/ Banksy “Flowing off” http://www.flickr.com/photos/loungerie/4109420324/ Banksy “They’re Coming” http://www.flickr.com/photos/97041449@N00/4115205218/ Bansky “Tourqay Robot” http://en.wikipedia.org/wiki/File:Banksy_Torquay_robot_crop.jpg Banksy “You have got to be kidding me” http://www.banksy.co.uk/ Banksy “follow your Dream” http://www.flickr.com/photos/thomashawk/6343586111/ Banksy “nola” http://www.flickr.com/photos/eddiedangerous/3045255243/ Banksy “Flower Pollard Street” http://www.flickr.com/photos/eddiedangerous/1800573742/Banksy “what are you looking at?” http://www.flickr.com/photos/nolifebeforecoffee/124659356/ Banksy “Man and Picture of a dog” http://www.flickr.com/photos/atomicshed/141462789/ Banksy “Anti-Capitalism for sale” http://www.flickr.com/photos/jcodysimms/246024687/
  27. 27. Material Used 3d teapot model http://resumbrae.com/ub/dms423_f08/10/ Metal Teapot http://www.flickr.com/photos/11273631@N08/2867342497/ furry teapot http://www.flickr.com/photos/11273631@N08/2867342461/ Television Icon http://thenounproject.com/noun/television/#icon-No416 Graphics Card http://www.flickr.com/photos/43779660@N00/218093887/ Banksy “under the Carpet” http://www.flickr.com/photos/acb/147223287/ Boxing http://www.flickr.com/photos/51035655711@N01/2826228569/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×