Now it’s time to sum up canvas :
-
canvas（画布）is an element of html documents. When using it, we must define the width and height of it, so that the browser can know how large the canvas is; -
Actually, we need to use JavaScript to draw on canvas. Yeah, JavaScript looks like a pen;
-
To start drawing, we need get the context of the canvas first. Here is a simple example:
[caption id=”” align=”aligncenter” width=”677”]
simple example[/caption]
- Draw an image into the canvas:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<span style="color: #cd2828; font-weight: bold;"><!DOCTYPE html></span>
<span style="color: #6ab825; font-weight: bold;"><html></span>
<span style="color: #6ab825; font-weight: bold;"><head></span>
<span style="color: #6ab825; font-weight: bold;"><meta</span> <span style="color: #bbbbbb;">charset=</span><span style="color: #ed9d13;">"utf-8"</span><span style="color: #6ab825; font-weight: bold;">></span>
<span style="color: #6ab825; font-weight: bold;"><title></span>demo<span style="color: #6ab825; font-weight: bold;"></title></span>
<span style="color: #6ab825; font-weight: bold;"></head></span>
<span style="color: #6ab825; font-weight: bold;"><body></span>
<span style="color: #6ab825; font-weight: bold;"><canvas</span> <span style="color: #bbbbbb;">id=</span><span style="color: #ed9d13;">"c"</span> <span style="color: #bbbbbb;">width=</span><span style="color: #ed9d13;">"200"</span> <span style="color: #bbbbbb;">height=</span><span style="color: #ed9d13;">"200"</span><span style="color: #6ab825; font-weight: bold;">></canvas></span>
<span style="color: #6ab825; font-weight: bold;"><script></span>
// connect the canvas that the id is "c"
var c = document.querySelector("#c");
// make canvas to 2d cavas.
var ctx = c.getContaxt("2d");
// define "image" to a brand new image object
var image = new Image();
// when image is loaded, run this function
image.onload = function () {
ctx.drawImage(image, 0, 0, c.width, c.height);
}
image.src = 'abc.jpg'; // you can add local or online sources
<span style="color: #6ab825; font-weight: bold;"></script></span>
<span style="color: #6ab825; font-weight: bold;"></body></span>
<span style="color: #6ab825; font-weight: bold;"></html></span>
- We also can draw our own patterns onto the canvas.
ctx.fillRect(100, 100, 100, 100); // this will draw a fufill rectanglectx.strokeRect(50, 50, 50, 50); // this can draw a blank rectangle
[caption id=”” align=”aligncenter” width=”235”]
rectangle[/caption]
-
If you want to erase the entire canvas, you could call
clearRectwith the dimensions of canvas as follows:ctx.clearRect(0, 0, c.width, c.height); -
Draw paths!
// Draw "天" by using pathsctx.beginPath();ctx.moveTo(10, 10);ctx.lineTo(30, 10);ctx.moveTo(5, 20);ctx.lineTo(35, 20);ctx.moveTo(20, 10);ctx.lineTo(5, 35);ctx.moveTo(15, 20);ctx.lineTo(35, 35);ctx.save(); ctx.stroke(); -
Canvas2D allows us to translate (move), rotate, or scale objects.
Scaling
scale(x,y) multiplies the x and y values by a given factor so
ctx.scale(2,3);
will make all values twice as large on the x axis and three times as large on the y axis.
Translation
translate(x,y) moves all subsequent draw commands by x number of pixels on horizontally and y pixels vertically.
ctx.translate(20,40); moves all elements drawn after it 20 pixels to the rights and 40 pixels down.
The translate() method remaps the (0,0) position on the canvas.
[caption id=”” align=”aligncenter” width=”384”]
translate[/caption]
Rotation
ctx.rotate(angleRadians) rotates an object a certain number of radians (generally) about its center. You may have learned about radians in school but here’s a handy formula to convert a value from degrees to radians.
radians = degrees * (Math.PI/180)
- Every
canvasobject contains a stack of drawing states. Stacks are data structures that only let you push new items at the end. When you retrieve an item, it’s the last item that was pushed or Last In-First Out(LIFO).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var c = document.querySelector("#c");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,50,50);
// Save state with blue fill
ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(100,100,10,10);
// Restore to blue fill
ctx.restore();
ctx.fillRect(200,10,20,20);
-
Add color to the canvas:
ctx.fillStyle = "green"; -
Add text:
ctx.strokeText("the text", 10, 10); -
We can make our own image effect program by dealing with the image data. e.g:
image.onload = function () {console.log('loaded image');ctx.drawImage(image, 0, 0, image.width, image.height);var ImageData = ctx.getImageData(0, 0, image.width, image.height);
// put image into grayscale
var grayScale = function(imagedata) {
for(var i=0; i<imagedata.data.length; i+=4) {
var redItem = imagedata.data[i]; //red
var greenItem = imagedata.data[i+1]; //green
var blueItem = imagedata.data[i+2]; //blue
// this is a Math: Gray = (Red + Green + Blue) / 3
var grayItem = (redItem + greenItem + blueItem) / 3; //gray
imagedata.data[i] = grayItem;
imagedata.data[i+1] = grayItem;
imagedata.data[i+2] = grayItem;
}
ctx.putImageData(imagedata, 0, 0);
}
grayScale(ImageData);
requestAnimationFrameis an awesome engine that support almost all the modern browsers. It just redraw the canvas over and over again, depending the speed of the local computer. As I see, it’s a loop. There is a good interpreter that explained whatrequestAnimationFrameis and how to use it: Animating with requestAnimationFrame
Read more
window.requestAnimationFrame()
requestAnimationFrame for Smart Animating
Kibo: A simple JavaScript library for handling keyboard events
CanvasRenderingContext2D.drawImage()
Seven grayscale conversion algorithms
HTML canvas translate() Method
