Canvas2D basis

What is Canvas

<Canvas> element is the most popular H5, draw an area on the page, use JS to draw graphics on it, initially proposed by Apple, the major browser manufacturers have done their implementation on different levels. canvas is specified in the 2D context and 3D context (WebGL), the vast majority of browsers currently support 2D context. WebGL development is still relatively slow.

Basic use

1, toDataURL()will draw a good image output as a picture

//get data URI of the image
var imgURI = drawing.toDataURL("image/png");
//display the image
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

2, the origin is the top left corner of the canvas element based on
two basic operations of painting 3,2D Context fill and stroke

Rectangles (rectangle)

1、fillRect()

image.png

context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

2、strokeRect()

image.png

//draw a red outlined rectangle
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//draw a blue outlined rectangle that’s semi-transparent
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);

3、clearRect()

image.png

//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
//clear a rectangle that overlaps both of the previous rectangles
context.clearRect(40, 40, 10, 10);

Drawing Paths

1, how to draw a dial

var drawing = document.getElementById("drawing");
//make sure <canvas> is completely supported
if(drawing.getContext) {
   var context = drawing.getContext("2d");
   //start the path
   context.beginPath();
   //draw outer circle
   context.arc(100, 100, 99, 0, 2 * Math.PI, false);
   //draw inner circle
   context.moveTo(194, 100); //将光标移动这个内圆绘制的起点上
   context.arc(100, 100, 94, 0, 2 * Math.PI, false);
   //draw minute hand
   context.moveTo(100, 100);
   context.lineTo(100, 15); // 从最后绘制点到(100,15)绘制一条线
   //draw hour hand
   context.moveTo(100, 100);
   context.lineTo(35, 100);
   //stroke the path
   context.stroke();
}

image.png

2, it is determined whether a coordinate point on the route drawing
context.isPointInPath (100, 100) // true

Drawing Text

1, fillText (), strokeText ( ) which is rarely used
2,3 attribute font, textAlign, textBaseline
. 3, Demo

image.png

context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
//start-aligned
context.textAlign = "start";
context.fillText("12", 100, 40);
//end-aligned
context.textAlign = "end";
context.fillText("12", 100, 60);

4, using the measureText () may be a measure of the size of text

// 如果文字的长度大于140，就将字体缩小
var fontSize = 100;
context.font = fontSize + "px Arial";
while(context.measureText("Hello world!").width > 140) {
    fontSize--;
    context.font = fontSize + "px Arial";
}
context.fillText("Hello world!", 10, 10);
context.fillText("Font size is " + fontSize + "px", 10, 50);

image.png

Transformations

1. Image conversion method
   Rotate (angle)
   Scale (the scaleX, scaleY)
   Translate (X, Y)
   Transform (m1_1, m1_2, M2_1, M2_2, DX, Dy)
   the setTransform (m1_1, m1_2, M2_1, M2_2, DX, Dy)

2. Available translate redefined position of the origin,
   at the time of drawing a circle, the center position may be the position of the origin, so that more convenient positioning of the circle

3. Note context.rotate is rotated coordinate axes

   
   
   

   image.png

Drawing Images draw pictures

1. From the current position coordinates (10, 10) of canvasd will come in picture insertion (Note that if the picture fit in canvas, the picture is not inserted incoming)

var image = document.images[0];
 context.drawImage(image, 10, 10);

2. Inserted into the designated area - performs drawing within the image (10, 10) starts a wide region 90, high 90

context.drawImage(image, 10, 10,90,90)

3. The upper part of the specified image insertion area of ​​the canvas specified area (corresponding to a portion of the canvas on the original image cut)

//从图像上(0,10)开始，宽150，高385的区域插入到 canvas中从(0,100)开始，宽40，高60的区域内
context.drawImage(image, 0, 10, 150, 385, 0, 100, 40, 60);

image.png

4. Note that if the incoming picture is inserted in the other domain names, will complain

shadows shaded

DEMO:

image.png

var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

Gradients Gradient

1. Linear gradient

   
   
   

   image.png

var gradient = context.createLinearGradient(30, 30, 80, 80);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

2. Gradient Path entry

   
   
   

   image.png

var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

Patterns mode

1. I.e., repeating pattern of the image, like css "repeat", "repeat-x", "repeat-y", no-repeat "

var context = drawing.getContext("2d");
var image = document.images[0],
    pattern = context.createPattern(image, "repeat");
//draw a rectangle
context.fillStyle = pattern;  // 图像repeat模式仍然是从(0,0)开始的
context.fillRect(30, 0, 150, 150); // 这里的意思是绘制矩形，并让图像repeat模式在该矩形区域显示，并不是说 图片repeat是从绘制该矩形的起点开始的，渐变也是如此

image.png

Working with Image Data original image data

Can be used for filter effects, a detailed look www.html5rocks.com/en/tutorials/canvas/imagefilters/

Compositing synthesis

How entanglement between two images here give an example, other similar

image.png

var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//change the global alpha
context.globalCompositeOperation = "xor";
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

to sum up

1. canvas content that these, like on so many designers use color than the above, but the colors, graphics combined creativity is really limitless, canvas as well.
2. webGL is an implementation of OpenGL ES 2.0 browser interface for 3D painting, the production stage is best not to use, can be used in the experimental stage.