HTML5 Canvas - Let's Draw!

  • Published on
    01-Sep-2014

  • View
    3.192

  • Download
    3

Embed Size (px)

DESCRIPTION

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.

Transcript

<ul><li> HTML5 Canvas </li> <li> The canvas isa 2d bitmap. </li> <li> No layers.No undo.No objects.No moving stuff. </li> <li> http://rawkes.com/lab/google-balls-logo </li> <li> http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html </li> <li> How can I create a c anvas? </li> <li> HTMLfallback txtJavaScriptvar canvas = document.getElementsById(a);var ctx = canvas.getContext(2d); </li> <li> I draws quares. </li> <li> 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); </li> <li> Iwant to d raw an image! </li> <li> create imagevar img = new Image();img.onload = function() { w hen loaded ctx.drawImage(img, 0, 0);}; x yimg.src = nakedrobot.png; image url </li> <li> how can you draw text? </li> <li> css p ropertiesctx.font = bold 40px sans-serif;ctx.fillText(hello kitty, 5, 40); x yhello kitty </li> <li> bring methe pixels! </li> <li> var w = canvas.width;var h = canvas.height; new image arrayvar img = ctx.createImageData(w, h);for (var x = 0; x &lt; w; x++) { for (var y = 0; y &lt; 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 </li> <li> http://media.chikuyonok.ru/ambilight/ </li> <li> close pixealtehttp://desandro.com/resources/close-pixelate/ </li> <li> A nimation function ti ck() { doKeyboard( ); updatePlaye r(); doAI(); draw(); audio(); }var fps = 3 0;setInterval (tick, 1000 /fps) ; </li> <li> get inputdraw updateevery 30ms </li> <li> function tick() { doKeyboard(); updatePlayer(); doAI(); draw(); audio();}var fps = 30;setInterval(tick, 1000/fps); </li> <li> How cani Save anImage? </li> <li> 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 </li> <li> BrowserSupport 67% </li> <li> http://weavesilk.com/ </li> <li> Summary 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. </li> <li> Material Used Banksy Have a Break http://www.flickr.com/photos/loungerie/4109421950/ Banksy Flowing off http://www.flickr.com/photos/loungerie/4109420324/ Banksy Theyre 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/ </li> <li> 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/ </li> </ul>