Basics of HTML Canvas. Material taken from CSCU9B2

Transcription

1 Basics of HTML Canvas Material taken from CSCU9B2 CSCU9B2 1

2 We are going to cover What is HTML canvas and what it can do Most commonly used canvas methods Example of a simple animated application CSCU9B2 2

3 What is Canvas? Canvas is a medium for oil painting, typically stretched across a wooden frame.

4 What is HTML Canvas? HTML canvas is about drawing graphics There is a set of JavaScript methods (APIs) for drawing graphics (lines, boxes, circles, shapes). HTML canvas is a rectangular area on a web page, specified with the <canvas> element. The HTML <canvas> element (introduced in HTML5) is a container for HTML graphics. CSCU9B2 4

5 What can HTML canvas do? Draw colorful text Draw graphical shapes Can be animated. Everything is possible: from simple bouncing balls to complex animations Can be interactive and respond to events Offer lots of possibilities for HTML gaming applications CSCU9B2 5

6 Examples CSCU9B2 6

7 Canvas element Looks like this: <canvas id="mycanvas" width="200" height="100"></canvas> Must have an id attribute so it can be referred to by JavaScript; The width and height attribute is necessary to define the size of the canvas. CSCU9B2 7

8 Drawing on the Canvas All drawing on the HTML canvas must be done with JavaScript in three steps: 1. Find the canvas element 2. Create a drawing object 3. Draw on the canvas E.g. var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); ctx.fillstyle = "#FF0000"; ctx.fillrect(0,0,150,75); CSCU9B2 8

9 HTML Canvas Coordinates The HTML canvas is two-dimensional. The upper-left corner of the canvas has the coordinates (0,0) In the previous example, you saw this method used: fillrect(0,0,150,75) This means: Start at the upper-left corner (0,0) and draw a 150 x 75 pixels rectangle. CSCU9B2 9

10 Canvas fillstyle and strokestyle The fillstyle property is used to define a fill-color (or gradient) for the drawing. The strokestyle defines the color of the line around the drawing. E.g. ctx.fillstyle="#ff0000"; ctx.strokestyle = blue ; ctx.fillrect(20,20,150,50); ctx.strokerect(20,20,200,100); CSCU9B2 10

11 Canvas - Gradients Gradients can be used to fill rectangles, circles, lines, text, etc. Two different types of gradient: createlineargradient(x,y,x1,y1) createradialgradient(x,y,r,x1,y1,r1) Need to specify two or more color "stops Eg start and finish colours To use the gradient, set the fillstyle or strokestyle property to the gradient CSCU9B2 11

12 Example of linear gradient Create a linear gradient. Fill rectangle with the gradient: var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); // Create gradient var grd=ctx.createlineargradient(0,0,200,0); grd.addcolorstop(0,"red"); grd.addcolorstop(1,"white"); // Fill with gradient ctx.fillstyle=grd; ctx.fillrect(0,0,150,80); CSCU9B2 12

13 Draw a Line To draw a straight line on a canvas, you use these methods: E.g. moveto(x,y) defines the starting point of the line lineto(x,y) defines the ending point of the line stroke() method draws the line var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); ctx.moveto(0,0); ctx.lineto(200,100); ctx.stroke(); CSCU9B2 13

14 Draw a Circle To draw a circle on a canvas, you use the following methods: Eg. beginpath(); arc(x,y,r,start,stop) var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.arc(95,50,40,0,2*math.pi); ctx.stroke(); CSCU9B2 14

15 Drawing Text on the Canvas To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text textalign Aligns the text. Possible values: start, end, left, right, center stroketext(text,x,y) - Draws text on the canvas filltext(text,x,y) - Draws "filled" text on the canvas E.g., Write the text in orange with a blue border around the text ctx.font = "italic bold 56px Arial, sans-serif"; ctx.fillstyle="orange"; ctx.textalign = "start"; ctx.filltext("some text", 10, 50); ctx.linewidth = 3; ctx.strokestyle="blue"; ctx.stroketext("some text", 10, 50); CSCU9B2 15

16 Canvas Images To draw an image on a canvas, use the following method: drawimage(image,x,y,w,h) E.g. var myimage = new Image(); myimage.src = "image2.jpeg"; ctx.drawimage(myimage, 20, 20, 100, 100); CSCU9B2 16

17 Animation Changing things over time Animation on a canvas is achieved by: 1. Defining drawing operations in a function a) Clear the canvas b) Draw objects slightly differently from previous time eg location, size, rotation 2. Call function repeatedly at a defined time interval setinterval(animate, 30); CSCU9B2 17

18 A simple animation - example <canvas id="my_canvas" width="800" height="700"> <script> var ctx = document.getelementbyid("my_canvas").getcontext("2d"); var cw = ctx.canvas.width; var ch = ctx.canvas.height; var y = 0, x=0; function animate() { ctx.save(); ctx.clearrect(0, 0, cw, ch); ctx.rotate(-0.3); ctx.fillstyle="green"; ctx.fillrect(0, y, 50, 50); y++; ctx.rotate(0.8); ctx.fillstyle= red ; ctx.fillrect(x, 0, 50, 50); x++; ctx.restore(); } var animateinterval = setinterval(animate, 30); ctx.canvas.addeventlistener('click', function(event){ clearinterval(animateinterval);}); </script> CSCU9B2 18

19 Animation using CSS Animations can be created with CSS Lets an element gradually change styles Color, position or any other property Transitions Key frames Style values at a particular time point Timing CSCU9B2 19

20 CSS Transitions - example <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s, height 2s, transform 2s; } div:hover { width: 300px; height: 300px; transform: rotate(180deg); } </style> </head> <body> <div><p>some text.</p></div> </body> </html> CSCU9B2 20

21 CSS Keyframes - example <html> <head> <style> div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; example { from {background-color: red; width: 100px;} to {background-color: yellow; width: 200px;} } </style> </head> <body> <div></div> </body> </html> CSCU9B2 21

22 Web Technologies The End CSCU9B2 22