Html canvas
RaoMubashar
224 views
14 slides
Feb 09, 2018
Slide 1 of 14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
About This Presentation
Presentation of HTML Canvas
Slide Content
Topic HTML Canvas Members Mubashar
What is HTML5 Canvas Browser Support To draw something Canvas Examples Events Fillstyle G aming Outlines
What is HTML5 Canvas The HTML5 C anvas element is used to draw graphics via JavaScript. The Canvas element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas used for drawing boxes, circles, text, and adding images etc.
Browser Support The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas.
To draw something you need 4 basic components A Bitmap to hold the pixels . A Canvas to writing into the bitmap A drawing like rectangle, arc, line etc A paint to describe the colors and styles for the drawing
<!DOCTYPE html> <html> <head> <title>A Simple Canvas Example</title> <style> body { background:#CCC; } #canvas { margin: 10px; padding: 10px; background:#FFF; </style> </head> <body> <canvas id='canvas' width='900' height='100'> </canvas> <script src=" Untitled-1.js "></script> </body> </html> A basic Example var canvas = document.getElementById ('canvas'); context = canvas.getContext ('2d'); context.font = '38pt times of new roman'; context.fillStyle = ' cornflowerblue '; context.strokeStyle = 'blue'; context.fillText ('Hey I am Javed Akhtar', canvas.width /4 - 150, canvas.height /2 + 14); context.strokeText ('Hey I am Javed Akhtar', canvas.width /4 - 150, canvas.height /2 + 16 ); Java script code HTML Code
Events Mouse mousedown , mouseup , mousemove , mouseout and mouseover Keyboard keydown keypress keyup
Canvas default setting By default, the browser creates canvas elements with a width of 300 pixels and a height of 150 pixels. You can change the size of a canvas element by specifying the width and height attributes
Canvas Examples Canvas Animation Canvas Rotation drawImage (image , dx, dy ) Text and Fonts Create Gradients
A fillStyle Example <!DOCTYPE HTML><html> <head > <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type="text/ javascript "> function drawShape (){ var canvas = document.getElementById (' mycanvas '); if ( canvas.getContext ) { var ctx = canvas.getContext ('2d '); for ( var i =0;i<7;i++){ for ( var j=0;j<7;j ++){ ctx.fillStyle =' rgb (' + Math.floor (255-20.5* i )+ ','+ Math.floor (255 - 42.5*j) + ',255)'; ctx.fillRect ( j*25, i * 25, 55, 55 ); } } else { alert('You need Safari or Firefox 1.5+ to see this demo .');} } </script> </head> <body id="test" onload =" drawShape ();"> <canvas id=" mycanvas "></canvas> </body></html>
Gaming
Bounce ball game Create the Canvas and draw on it Move the ball Bounce off the walls Paddle and keyboard controls Game over Build the brick field Collision detection Track the score and win Mouse controls Finishing up
Create the Canvas and draw on it <!DOCTYPE html> <html> < head>< title> Gamedev Canvas Workshop</title > <style >* { padding: 0; margin: 0; } canvas { background: # eee ; display: block; margin: 0 auto; } </style ></ head> <body > <canvas id=" myCanvas " width="480" height="320"></canvas > < script > // JavaScript code goes here </script > </body> </html>
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 224
- Slides 14
- Age 2851 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
44 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views