Download presentation
Presentation is loading. Please wait.
1
Canvas Notes
2
Canvas Element <canvas> Used to draw graphics on a web page
Can draw paths, boxes, circles, text and add images By default, has no border and no content
3
Canvas Example <canvas id=”myCanvas” width=”200” height=”100”> </canvas> So it can be referred to by JavaScript Defines the size of the canvas
4
Notepad: save as CanvasExample.html
<html><title>Canvas Example</title><body> </body></html>
5
Notepad: save as CanvasExample.html
<canvas id=”myCanvas” width=”200” height=”100”> </canvas>
6
Notepad: save as CanvasExample.html
<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000;”> </canvas> <script> </script>
7
Draw a line Use the following methods
moveTo(x,y) - defines the starting point of the line lineTo(x,y) - defines the ending point of the line
8
Draw a line Define a starting point (0,0), and an ending point (200,100). Use the stroke() method to actually draw the line
9
Draw a Line var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.strokeStyle = “red”; ctx.stroke();
10
Draw a Circle beginPath() - begins a path
arc(x,y,r,startangle,endangle) - creates an arc/curve To create a circle with arc() Set start angle to 0 and end angle to 2*Math.PI (x and y parameters define the coordinates of the center of the circle, r parameter defines the radius)
11
x axis, y axis, width,height
Draw a Circle var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); x axis, y axis, width,height
12
Canvas Coordinates Canvas is a 2-dimensional grid
Upper left corner has coordinates (0,0) Ex. fillRect(0,0,150,75) Start in upper left corner (0,0) and draws a 150x75 pixel rectangle
13
Change the Background Color
ctx.fillRect(0,0,150,75); fillRect(x,y,width,height) method draws a rectangle ctx.fillStyle = "#FF0000"; Fills the drawing object with the color red
14
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 fillText(text,x,y) - draws "filled" text on the canvas strokeText(text,x,y) - draws text on the canvas (no fill)
15
Using fillText() var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
16
Using fillText() Set font to 30px "Arial" and write a filled text on the canvas:
17
Using strokeText() Set font to 30px "Arial" and write a text, with no fill, on the canvas:
18
Using strokeText() var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,100); Can’t change text color
19
Add color and center text
Set font to 30px "Comic Sans MS" and write a filled red text in the center of the canvas:
20
Add color and center text
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "30px Comic Sans MS"; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText("Hello World", canvas.width/2, canvas.height/2); To change color, font style and size of texst
21
TextAlign Start End Left Center Right
22
Canvas Gradients Gradients can be used to fill rectangles, circles, lines, text, etc.
23
Canvas Gradients There are two different types of gradients:
createLinearGradient(x,y,x1,y1) - creates a linear gradient createRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient
24
Canvas Gradients Add two or more color stops using the addColorStop() method specifies the color stops, and its position along the gradient (anywhere between 0 and 1) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).
25
Using createLinearGradient()
Create a linear gradient. Fill rectangle with the gradient:
26
Using createLinearGradient()
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
27
Using createLinearGradient()
// Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");
28
Using createLinearGradient()
// Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
29
Using createRadialGradient()
Create a radial/circular gradient. Fill rectangle with the gradient:
30
Using createRadialGradient()
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
31
Using createRadialGradient()
// Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");
32
Using createRadialGradient()
// Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);
Similar presentations
