Canvas
•Download as PPTX, PDF•
0 likes•296 views
This was presented to Desktop & Web Programming Course Teacher by me & my friends Mou and Rifat.
Recommended
More Related Content
What's hot
What's hot (13)
Viewers also liked
Viewers also liked (11)
Similar to Canvas
Similar to Canvas (20)
More from Rajon
More from Rajon (16)
Recently uploaded
Recently uploaded (20)
Canvas
- 1. CANVAS An exciting HTML5 element.
- 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. 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. Understanding the Canvas Coordinate 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); // 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. 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. 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 // 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. 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('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. 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. 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