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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Introduction to HTML5 Canvas

Ähnlich wie Introduction to HTML5 Canvas (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to HTML5 Canvas