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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Canvas

2,637
views

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,637
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
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>
  • 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';
  • 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';
  • 4. <canvas width="300" height="250"> This text is displayed if your browser does not support canvas. </canvas>
  • 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>
  • 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
  • 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
  • 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();
  • 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;
  • 10. // imagesvarmyImage = new Image();myImage.src = "img/html5.png";myImage.onload = function() {context.drawImage(myImage, 0, 0); };
  • 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 };}
  • 12. // animationvarmyIterval = setInterval(function() {drawIt(); }, 500);
  • 13. // safer animationvarmyTimeout = setTimeout(loop, 500);var loop = function() {drawIt();clearTimeout(myTimeout);myTimeout = setTimeout(loop, 500);});
  • 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); }; })();
  • 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/})();