Javascript Canvas API
-
Upload
samuel-santos -
Category
Education
-
view
76 -
download
3
Transcript of Javascript Canvas API
![Page 1: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/1.jpg)
By : Samuel Santos | email : [email protected] : http://samueltcsantos.blogspot.com
The canvas drawing API
![Page 2: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/2.jpg)
Canvas
• In the real world things exist in space. In the
HTML5 world the equivalent is that objectsexist on the canvas element.
![Page 3: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/3.jpg)
The canvas coordinate system
• To know how to position objects on canvas,
it is necessary to understand the canvascoordinate system.
![Page 4: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/4.jpg)
The canvas coordinate system
• The canvas coordinate system is
somewhat different from the usual
Cartesian system of coordinates in math.
![Page 5: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/5.jpg)
The canvas coordinate system
![Page 6: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/6.jpg)
The canvas coordinate system
• Another oddity in the canvas coordinate
system is that angles are measured in a
clockwise sense from the direction of
the positive x-axis
![Page 7: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/7.jpg)
The canvas coordinate system
![Page 8: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/8.jpg)
The canvas drawing API
• The canvas drawing application
programming interface (API) allows you to
draw things such as shapes and fills using
JavaScript.
![Page 9: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/9.jpg)
The canvas context
• The object that allows access to the
canvas drawing API is the canvas
rendering context.
![Page 10: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/10.jpg)
The canvas context
• The API is nothing but a collection of
properties and methods of that
object.
![Page 11: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/11.jpg)
The canvas context
• how to access the canvas context:
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');
![Page 12: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/12.jpg)
Drawing lines and curves
• The following are a few essential
properties and methods of the canvascontext for drawing basic shapes using
lines and curves.
![Page 13: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/13.jpg)
Drawing lines and curves
• The strokeStyle property specifies the linecolor in CSS-style format.
• The default value is '#000000' (black).
context.strokeStyle = '#0000ff';
![Page 14: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/14.jpg)
Drawing lines and curves
• The lineWidth property specifies the line
thickness in pixels. The default value is 1.
context.lineWidth = 2;
![Page 15: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/15.jpg)
Drawing lines and curves
• The beginPath() method resets the current
path. A path is a collection of subpaths.
• Each subpath is a set of points connected
by straight or curved lines.
context.beginPath() ;
![Page 16: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/16.jpg)
Drawing lines and curves
• The closePath() method closes the current
subpath and starts a new one from the
end of the closed subpath.
context.closePath() ;
![Page 17: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/17.jpg)
Drawing lines and curves
• The moveTo(x, y) method moves the cursor
to the specified location (x, y) without
drawing anything, that is, it creates a newsubpath from the specified point.
context.moveTo(x,y) ;
![Page 18: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/18.jpg)
Drawing lines and curves
• The lineTo(x, y) method draws a straight
line from the current location to the new
location (x, y) , that is, it adds a new point toa subpath and connects that point to theprevious point in the subpath with a straightline.
context.lineTo(x,y) ;
![Page 19: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/19.jpg)
Drawing lines and curves
• The arc (x, y, radius, startAngle, endAngle,anticlockwise) method adds an arc to thepath with center (x, y), and of the specifiedradius. The starting and ending angles are inradians. The anticlockwise parameter is a
boolean: if true, the arc is drawn in acounterclockwise direction; if false, it is drawnin a clockwise direction.
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
![Page 20: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/20.jpg)
Drawing lines and curves
• The rect(x, y, w, h) method creates a new
closed rectangular subpath with the upper-left corner at (x, y) and width w and height h.
context.rect(x, y, w, h);
![Page 21: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/21.jpg)
Drawing lines and curves
• The strokeRect(x, y, w, h) method
combines the last two methods to
render an outline of the specified
rectangle.
context.stroke Rect(x,y,w,h);
![Page 22: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/22.jpg)
Drawing lines and curves
• The stroke() method renders the current
subpath using the current stroke styles.
context.stroke ();
![Page 23: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/23.jpg)
Creating fills
• The fillStyle property gets or sets the style
for filling shapes. It can be a color or agradient.
context.fillStyle = ‘#333’;
![Page 24: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/24.jpg)
Creating fills
• The fill() method fills subpaths using the
current fill style.
context.fill();
![Page 25: Javascript Canvas API](https://reader034.fdocuments.us/reader034/viewer/2022042607/55a6c8b41a28ab531d8b465f/html5/thumbnails/25.jpg)
Creating fills
• The fillRect(x, y, w, h) method creates a filled
rectangle with the upper-left corner at (x, y)
and width w and height h, using the
current fill style.
context. fillRect(x, y, w, h) ;