Introduction to HTML5 Canvas

1. CANVAS introduction to: Tuesday, September 3, 13

2. Mark J. Morris @blurredbits presented by: September 3, 2013 Tuesday, September 3, 13

3. “Added in HTML5, the HTML <canvas> element is an element which can be used to draw graphics via scripting (usually Javascript).” Tuesday, September 3, 13

4. Chrome 25+ Firefox 20+ Safari 5+ IE 9.0+ Opera 9.0+ Tuesday, September 3, 13

5. index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <link rel=”stylesheet” href=”css/style.css”> </head> <body> <script src=”js/canvas.js”></script> </body> </html> Tuesday, September 3, 13

6. index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <link rel=”stylesheet” href=”css/style.css”> </head> <body> <script src=”js/canvas.js”></script> </body> </html> <canvas id=”intro” width=300 height=150> </canvas> Tuesday, September 3, 13

7. index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <link rel=”stylesheet” href=”css/style.css”> </head> <body> <script src=”js/canvas.js”></script> </body> </html> <canvas id=”intro” width=300 height=150> </canvas> <p>Oh noes! No canvas support!</p> Tuesday, September 3, 13

8. Tuesday, September 3, 13

11. basic canvas method fillRect(float x, float y, float width, float height) Tuesday, September 3, 13

13. js/canvas.js window.onload = canvasApp(); function canvasApp () { } var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); theCanvas.fillStyle = "rgb(160, 160, 160)"; theCanvas.fillRect(0, 0, 50, 50); Tuesday, September 3, 13

15. theCanvas.fillStyle = “orange”; theCanvas.fillStyle = “#FFA500”; theCanvas.fillStyle = “rgb(255,165,0)”; theCanvas.fillStyle = “rgba(255,165,0,1)”; Tuesday, September 3, 13

18. Text Methods Tuesday, September 3, 13

19. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! theCanvas.fillStyle = "blue"; ! theCanvas.font = "30px Arial"; ! theCanvas.textBaseline = "top"; ! theCanvas.fillText("Fort Collins", 0, 0); ! theCanvas.fillStyle = "red"; ! theCanvas.fillText("Internet", 0, 50); ! theCanvas.fillStyle = "blue"; ! theCanvas.fillText("Pros",0,100); var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

24. Line Methods Tuesday, September 3, 13

25. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! theCanvas.beginPath(); ! theCanvas.moveTo(50, 25); ! theCanvas.lineTo(50, 125); ! theCanvas.lineTo(150, 125); ! theCanvas.closePath(); ! theCanvas.stroke(); var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

31. (2,1) (2,4) Tuesday, September 3, 13

32. (1.5,1) (1.5,4) Tuesday, September 3, 13

33. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! theCanvas.beginPath(); ! theCanvas.moveTo(50.5, 25.5); ! theCanvas.lineTo(50.5, 125.5); ! theCanvas.lineTo(150.5, 125.5); ! theCanvas.closePath(); ! theCanvas.stroke(); var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

35. arcs arc(x, y, radius, startAngle, endAngle, anticlockwise) bezier bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) quadratic quadraticCurveTo(cp1x, cp1y, x, y) Tuesday, September 3, 13

36. Image Methods Tuesday, September 3, 13

37. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; ! img.onload = function(){ ! ! theCanvas.drawImage(img,0,0);! ! }; var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

41. scaling drawImage(image, x, y, width, height) slicing drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Tuesday, September 3, 13

42. Gradients Animations Patterns Shadows Transformations Compositing Video Audio Tuesday, September 3, 13

43. Additional Resources Tuesday, September 3, 13

46. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial Tuesday, September 3, 13

47. Thursday 9/5 6:00pm Crooked Cup Tuesday, September 3, 13

48. Mark J. Morris @blurredbits Thanks! Tuesday, September 3, 13

Introduction to HTML5 Canvas

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Introduction to HTML5 Canvas

Semelhante a Introduction to HTML5 Canvas (20)

Último

Último (20)

Introduction to HTML5 Canvas