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
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 19 Anúncio

Mais Conteúdo rRelacionado

Quem viu também gostou (11)

Anúncio

Semelhante a Canvas (20)

Anúncio

Mais recentes (20)

Canvas

  1. 1. CANVAS An exciting HTML5 element.
  2. 2. WHAT HTML5 CANVAS IS USED FOR ■ dynamic graphics ■ online and offline games ■ animations ■ interactive video and audio Easy to turn a plain web page into a dynamic web application and then convert that application into a mobile app for use on smartphones and tablets.
  3. 3. Skeleton <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); //Draw Here } }else{ //Fall bac kContent Goes Here } </script> </head> <body> <canvas id="canvas" width="150" height="150"></canvas> //Create a Canvas </body> </html>
  4. 4. Understanding the Canvas Coordinate System
  5. 5. Curves var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var startAngle = 0 * Math.PI; var endAngle = 2 * Math.PI; context.beginPath(); context.arc(x, y, radius, startAngle, endAngle); context.lineWidth = 15; // line color context.strokeStyle = 'green'; context.stroke(); Arc
  6. 6. Curves context.moveTo(188, 130); context.bezierCurveTo(140, 10, 388, 10, 388, 170); context.lineWidth = 10; Quadratic Curve context.moveTo(188, 150); context.quadraticCurveTo(288, 0, 388, 150); Bezier Curve
  7. 7. Paths context.moveTo(100, 20); // line 1 context.lineTo(200, 160); // quadratic curve context.quadraticCurveTo(230, 200, 250, 120); // bezier curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // line 2 context.lineTo(500, 90) context.lineJoin = 'bevel';
  8. 8. Shape // begin custom shape context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80);
  9. 9. Shape context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke();
  10. 10. Fill Style context.fillStyle = '#8ED6FF'; context.fill(); Color Fill // add linear gradient var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height); // light blue grd.addColorStop(0, '#8ED6FF'); // dark blue grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill(); Linear Gradient
  11. 11. Radial Gradient // create radial gradient var grd = context.createRadialGradient(238, 50, 10, 238,50, 300); // light blue grd.addColorStop(0, '#8ED6FF'); // dark blue grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill();
  12. 12. Pattern var imageObj = new Image(); imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); context.rect(0, 0, canvas.width, canvas.height); context.fillStyle = pattern; context.fill(); }; imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood- pattern.png';
  13. 13. Text context.textAlign = 'left'; ontext.strokeText('Hello World!', x, y); Align Stroke context.fillStyle = 'blue'; Color context.font = 'italic 40pt Calibri'; Font Size Style context.measureText(text); Metricies wrapText(context, text, x, y, maxWidth, lineHeight); WrapText
  14. 14. Transformations // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // scale y component context.scale(1, 0.5); // rotate 45 degrees clockwise context.rotate(Math.PI / 4); // apply custom transform context.transform(1, 0, 0, 1, tx, ty); // apply custom transform context.setTransform(1, 0, 0, 1, 0, 0);
  15. 15. Transformation State Stack context.save(); // save state 1 context.translate(canvas.width / 2, canvas.height / 2); context.save(); // save state 2 context.rotate(Math.PI / 4); context.save(); // save state 3 context.scale(2, 2); context.fillStyle = 'blue'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.restore(); // restore state 1 context.fillStyle = 'green'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
  16. 16. Composites //Shadows context.shadowColor = '#999'; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; //Global alpha context.globalAlpha = 0.5; //Cliping Region context.clip();
  17. 17. Animation animate(myRectangle, canvas, context, startTime); • Acceleration • Oscillation • Linear Motion • Animation Frame Lets Look at an example………..
  18. 18. Mouse Position function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25);} function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top };} var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; writeMessage(canvas, message); }, false);
  19. 19. Should Check Out ■ http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/ ■ http://www.sinuousgame.com/ ■ http://corehtml5canvas.com/code-live/ ■ http://curran.github.io/HT ■ http://www.williammalone.com/articles/create-html5-canvas-javascript-game- character/1/ML5Examples/ ■ http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds

×