Canvas et Html5
image.png
HTML5
Divided into sections by<head> and <body> as former, and add new tags such as <nav>, <article>,<header> and <footer> etc.
<!doctype html> should be always the first line of HTML5.
<canvas>element itself is accessible in DOM, but it's elements's are not accessible to DOM. cause it's work in immediate mode and not have its own objects.
No longer have to specify the script type in HTML5.
You can put text within canvas tags, so that it'll displayed if the browser does not support canvas.
<!-- detect support -->
<canvas>Your browser does not support HTML5 canvas</canvas>
And within javascript use function below to detect support:
function canvasSupport () {
return !!document.createElement('canvas').getContext;
//detect whether the canvas element exist and if it's context exist or null
}
function canvasApp() {
if (!canvasSupport) {
return;
}
}
Canvas
Basic Rectangle Shape
fillRect(x,y,width,height);
Filled rectangle with position [x,y] for width and height.
strokeRect(x,y,width,height);
Rectangle outline.
clearRectangle(x,y,width,height);
Clear the specified area.
Set up style before use:
context.fillstyle = 'red';
context.strokeStyle = 'black';
context.lineWidth = 2;
Canvas state
Canvas will store transformations, current clipping region and current values, and can be save and restored by:
context.save();
context.restore()
Using paths to create lines
beginPath(); // to start a path
beginPath(); closePath(); // subpath considered closed before outer
closePath(); // to end a path
eg:
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square'; // end style of path
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke(); // draw
context.closePath();
LineCap attributes
- butt: defualt, a flat edge that is perpendicular to the end of the line.
- round: semicicle edge.
- square: rectangle edge.
lineJoin attributes
- miter: edge is drawn at the join.
- round: round edge drawn at the join.
Advanced path methods
1. arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
x,y define the center of the circle, startAngle and endAngle are radians, anticlockwise define the direction in boolean value.
eg:
context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
2. arcTo()
context.arcTo(x1, y1, x2, y2, radius);
Draw a arc from [x1, y1] to [x2, y2].
3. Bezier curves
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); // cubic mode
context.quadraticCurveTo(cpx, cpy, x, y); // quadratic
Compositing
Control over the transparency and the layering effects.
- globalAlpha:
Default -> 1.0, range[0.0,1.0], must be set before a shape is drawn.
- globalCompositeOperation:
How shapes are drawn.
- copy
Where they overlap, displays the source and not the destination.
- destination-atop
Destination atop the source.
- destination-in
Destination in the source.
- destination-out
Destination out source.
- destination-over
Destination over the source.
- lighter
Displays the sum of the source image and destination image.
- source-atop
Source atop the destination.
- source-in
Source in the destination.
- source-out
Source out destination.
- source-over
(Default.) Source over destination.
- xor
Source xor destination.
eg:
//draw a big box on the screen
context.fillStyle = "black"; //
context.fillRect(10, 10, 200, 200);
//leave globalCompositeOperation as is
//now draw a red square
context.fillStyle = "red";
context.fillRect(1, 1, 50, 50);
//now set it to source-over
context.globalCompositeOperation = "source-over";
//draw a red square next to the other one
context.fillRect(60, 1, 50, 50); //now set to destination-atop
context.globalCompositeOperation = "destination-atop";
context.fillRect(1, 60, 50, 50);
//now set globalAlpha
context.globalAlpha = .5;
//now set to source-atop
context.globalCompositeOperation = "source-atop";
context.fillRect(60, 60, 50, 50);
image.png
globalCompositeOperation does not work properly any more
Simple canvas transformations
Nowadays mostly used transformations are scale and rotate:
context.setTransform(1,0,0,1,0,0); // transform matrix (according to the former)
var angleInRadians = 45 * Math.PI / 180;
context.rotate(angleInRadians); // use radians instead of degrees
context.translate(x,y); // reset the origin locations
image.png
