O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Exploring Canvas
Exploring Canvas
Carregando em…3
×

Confira estes a seguir

1 de 63 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (17)

Anúncio

Semelhante a Canvas (20)

Anúncio

Mais recentes (20)

Canvas

  1. Canvas L5 FT W! H TM Web Directions South 2009 Dmitry Barano vskiy
  2. “The canvas element represents a!resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly” HTML 5 Specification
  3. Teenager of web technologies
  4. Awesome What is Awesome? !
  5. Draw! You can draw!
  6. api API is small & simple
  7. HTML5 HTML 5
  8. HTML5 HTML5
  9. Howto? How to…
  10. JavaScript
  11. Context Context
  12. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
  13. context.save(); context.restore(); context.scale(x, y); context.rotate(angle); context.translate(x, y); context.transform(m11, m12, m21, m22, dx, dy); context.setTransform(m11, m12, m21, m22, dx, dy);
  14. var a = context.globalAlpha; context.globalAlpha = a * 0.5; var b = context.globalCompositeOperation; context.globalCompositeOperation = "xor";
  15. context.strokeStyle = "#fc0"; context.fillStyle = "#000"; var gradient = context.createLinearGradient(x1, y1, x2, y2); // or var gradient = context.createRadialGradient(x1, y1, r1, x2, y2, r2); gradient.addColorStop(0 / 6, "red"); gradient.addColorStop(1 / 6, "orange"); gradient.addColorStop(2 / 6, "yellow"); gradient.addColorStop(3 / 6, "green"); gradient.addColorStop(4 / 6, "blue"); gradient.addColorStop(5 / 6, "navy"); gradient.addColorStop(6 / 6, "purple"); context.fillStyle = gradient;
  16. context.lineWidth = 2; context.lineCap = "round"; context.lineJoin = "bevel"; context.miterLimit = 5; context.shadowColor = "#000"; context.shadowOffsetX = 0; context.shadowOffsetY = 3; context.shadowBlur = 7;
  17. primiti Primitives ve
  18. context.clearRect(x, y, width, height); context.fillRect(x, y, width, height); context.strokeRect(x, y, width, height);
  19. paths Paths
  20. context.beginPath(); context.closePath(); context.moveTo(x, y); context.lineTo(x, y); context.quadraticCurveTo(cpx, cpy, x, y); context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y); context.arcTo(x1, y1, x2, y2, radius); context.arc(x, y, radius, startAngle, endAngle, anticlockwise); context.rect(x, y, width, height); context.fill(); context.stroke(); context.clip(); context.isPointInPath(x, y);
  21. text Text
  22. context.font = 'italic 400 12px/2 Palatino, » Georgia, serif'; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("Web Directions", 100, 120); context.strokeText("Canvas FTW", 100, 150, 140); var metrics = context.measureText("How wide is » this text?"), width = metrics.width;
  23. images Images
  24. var image = new Image; image.onload = function () { context.drawImage(image, x, y); // or context.drawImage(image, x, y, w, h); // or context.drawImage(image, sx, sy, sw, sh, x, y, w, h); }; image.src = "graffiti.jpg";
  25. sy y var image = new Image; image.onload = sx function () { sh x h context.drawImage(image, x, y); // or sw w context.drawImage(image, x, y, w, h); // or context.drawImage(image, sx, sy, sw, sh, x, y, w, h); }; image.src = "graffiti.jpg";
  26. pixels Pixel Pushing
  27. var data = context.createImageData(w, h); // or var data = context.createImageData(old_data); var data = context.getImageData(x, y, w, h); context.putImageData(data, dx, dy); // or context.putImageData(data, dx, dy, x, y, w, h);
  28. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0] };
  29. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0] };
  30. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0] }; R G B A
  31. not! What is not Awesome?
  32. ugly API is ugly
  33. 1by1 Setting attributes one by one
  34. context.lineWidth = 2; context.lineCap = "round"; context.lineJoin = "bevel"; context.miterLimit = 5; context.shadowColor = "#000"; context.shadowOffsetX = 0; context.shadowOffsetY = 3; context.shadowBlur = 7;
  35. context.setAttr({ lineWidth: 2, lineCap: "round", lineJoin: "bevel", miterLimit: 5, shadowColor: "#000", shadowOffsetX: 0, shadowOffsetY: 3, shadowBlur: 7 });
  36. pain! Coding paths is painful
  37. context.beginPath(); context.moveTo(x, y); context.lineTo(x, y); context.quadraticCurveTo(cpx, cpy, x, y); context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y); context.arcTo(x1, y1, x2, y2, radius); context.arc(x, y, radius, startAngle, endAngle, anticlockwise); context.rect(x, y, width, height); context.closePath(); context.fill();
  38. context.beginPath() .moveTo(x, y) .lineTo(x, y) .quadraticCurveTo(cpx, cpy, x, y) .bezierCurveTo(c1x, c1y, c2x, c2y, x, y) .arcTo(x1, y1, x2, y2, radius) .arc(x, y, radius, startAngle, endAngle, anticlockwise) .rect(x, y, width, height) .closePath() .fill();
  39. var path = ["move", x, y, "line", x, y, "quadratic", cpx, cpy, x, y, "arc", x, y, radius, startAngle, endAngle, anticlockwise]; context.path(path).close().fill(); context.path(["move", 10, 10, "line", 50, 50]).close().fill();
  40. no way No way to store path
  41. more! Not enough primitives
  42. support Bad support
  43. 89%
  44. 81%
  45. 76%
  46. 74%
  47. Zero
  48. HTML 5
  49. Thank You dmitry@baranovskiy.com
  50. Thank You Photos used in this presentation: http://www.flickr.com/photos/garryknight/2390411392/ http://www.flickr.com/photos/livenature/233281535/ http://www.flickr.com/photos/yoadolescente/3212368604/ http://www.flickr.com/photos/andreassolberg/433734311/ http://www.flickr.com/photos/cassidy/67331975/ http://www.flickr.com/photos/b-tal/93425807/ http://www.flickr.com/photos/pefectfutures/163853250/ http://www.flickr.com/photos/streetart-berlin/3746020273/ http://www.flickr.com/photos/streetart-berlin/3954856553/ http://www.flickr.com/photos/streetart-berlin/3947360186/ http://www.flickr.com/photos/streetart-berlin/3949549099/ http://www.flickr.com/photos/streetart-berlin/3949546871/ http://www.flickr.com/photos/streetart-berlin/3926942710/ http://www.flickr.com/photos/streetart-berlin/3834021290/ dmitry@baranovskiy.com

×