Download to read offline
Uploaded byRajon
Canvas
The document provides an overview of the HTML5 canvas element and what it can be used for, including dynamic graphics, games, animations, and interactive media. It then demonstrates how to draw basic shapes, apply colors, gradients and patterns, add text, and perform transformations using the canvas rendering context. It also discusses mouse input, animation, and saving/restoring the canvas state. The canvas allows turning a basic webpage into an interactive application that can be converted into a mobile app.
More Related Content
![Chat Application [Full Documentation]](https://cdn.slidesharecdn.com/ss_thumbnails/finaldoconchatapp-170418182505-thumbnail.jpg?width=640&height=640&fit=bounds)
Canvas
- 1. CANVAS An exciting HTML5element.
- 2. WHAT HTML5 CANVASIS 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. Skeleton <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <scripttype="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. Understanding the CanvasCoordinate System
- 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. 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. Paths context.moveTo(100, 20); // line1 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. Shape // begin customshape 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. Shape context.beginPath(); context.rect(188, 50, 200,100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke();
- 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. Radial Gradient // createradial 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. 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. Text context.textAlign = 'left'; ontext.strokeText('HelloWorld!', 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. Transformations // translate contextto 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. 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. 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. Animation animate(myRectangle, canvas, context,startTime); • Acceleration • Oscillation • Linear Motion • Animation Frame Lets Look at an example………..
- 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. 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