Your SlideShare is downloading. ×
0
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Canvas

2,674

Published on

Small powerpoint mockup of the HTML5 Canvas presentation I gave at the Microsoft Web Cafe.

Small powerpoint mockup of the HTML5 Canvas presentation I gave at the Microsoft Web Cafe.

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,674
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. <canvas><br />
  • 2. /*** CANVAS* */(function() {var my = {};my.name = 'Stijn Van Minnebruggen';my.work = 'Multimedia developer at These Days Antwerp';my.hobbies = 'Passionate about photography, graphic design, typography and music.';my.tweets = 'twitter.com/donotfold';my.website = 'donotfold.be';<br />
  • 3. varabout = {};about.canvas= 'The Canvas element allows dynamic rendering of 2D shapes and bitmap images in the browser'; about.html5 = 'Canvas is part of HTML5 and introduced in 2004';about.how= 'The shapes and images that are drawn on the canvas are scriptable with Javascript';<br />
  • 4. <canvas width="300" height="250"> This text is displayed if your browser does not support canvas. </canvas><br />
  • 5. <canvas id="myFirstCanvas" width="300" height="250"> This text is displayed if your browser does not support canvas. </canvas> <p><a href="#" onclick="drawIt();">Click me to draw rectangle</a></p> <script> function drawIt() {varmyFirstCanvas = document.getElementById("myFirstCanvas");var context = myFirstCanvas.getContext("2d");context.fillStyle = 'rgb(255,0,0)';context.fillRect(50, 25, 100, 150); } </script><br />
  • 6. // basic context methodscontext.fillStyle = "property"; // css color, pattern or gradient (default: black)context.fillRect(x, y, width, height); // draws a rectangle with the current fillStylecontext.strokeStyle = "property"; // allows same properties as fillStylecontext.strokeRect(x, y, width, height); // draws a rectangle with the current strokeStyle(no fill)context.clearRect(x, y, width, height); // clears the pixels in the specified rectangle<br />
  • 7. // strokes // 1. define start point // 2. define end point // 3. set optional styles // 4. draw linecontext.moveTo(x, y); // move the pencil to the starting pointcontext.lineTo(x, y); // imagine a line from the starting point to this ending pointcontext.strokeStyle = "property"; // set same style properties as before if you want context.stroke(); // draw the actual line<br />
  • 8. context.beginPath(); context.moveTo(0,0);context.lineTo(0,100);context.lineTo(100,100);context.lineTo(100,0);context.lineTo(0,0);context.stroke();<br />
  • 9. // gradients // fill or stroke styles allow gradientsvarmyLinearGradient = context.createLinearGradient(x0, y0, x1, y1);varmyRadialGradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1); // make as many color stops as you like, between 0 and 1myLinearGradient.addColorStop(0, "black"); myLinearGradient.addColorStop(1, "white"); // add the gradient to the style propertycontext.fillStyle= myLinearGradient;<br />
  • 10. // imagesvarmyImage = new Image();myImage.src = "img/html5.png";myImage.onload = function() {context.drawImage(myImage, 0, 0); };<br />
  • 11. // event listenerscanvas.addEventListener("click", drawIt, false); function drawIt(e) {varcursorPosition = getCursorPosition(e);var x = cursorPosition.x;var y = cursorPosition.y;var w = x+10;var h = y+10;context.fillRect(x, y, w, h); } function getCursorPosition(e) {var x, y; if(e.pageX != undefined && e.pageY != undefined) { x = e.pageX; y = e.pageY; } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } x -= canvas.offsetLeft; y -= canvas.offsetTop; return { "x": x, "y": y };}<br />
  • 12. // animationvarmyIterval = setInterval(function() {drawIt(); }, 500);<br />
  • 13. // safer animationvarmyTimeout = setTimeout(loop, 500);var loop = function() {drawIt();clearTimeout(myTimeout);myTimeout = setTimeout(loop, 500);});<br />
  • 14. // best animationwindow.requestAnimFrame= (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){window.setTimeout(callback, 1000 / 60); }; })();<br />
  • 15. // TUTORIALS http://diveintohtml5.org/canvas.html // base for this presentation http://billmill.org/static/canvastutorial/index.html // pong tutorial http://html5doctor.com/an-introduction-to-the-canvas-2d-api/ // TOOLS http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html // cheat sheet http://visitmix.com/labs/ai2canvas/ // AI to Canvas // DEMOS http://www.20thingsilearned.com // good integration http://www.frameratefest.com // canvas contest http://demo.thesedays.com // background effect http://easeljs.com// game demos http://soulwire.co.uk/hello // experiments http://9elements.com/io/projects/html5/canvas/})(); <br />

×