Canvas graphics (2D)

[note]

Must be set height, width attribute, the canvas element because the default width and height 150px, 300px;

<canvas id = "drawing" width = "200" height = "200"></canvas>

Call getContext () method passing the name of a context, it is necessary to determine the browser supports the <canvas>

if (drawing.getContext){
       var context = drawing.getContext("2d");
}

2D context

1. filling stroke

• Fill properties: the fillStyle ()
• Stroke attributes: strokeStyle ()

2. Draw a rectangle
fillRect (), strokeRect (), clearRect ()
receives four parameters: x coordinate of the rectangle, the y coordinate of the rectangle, the rectangle's width and height of the rectangle

Draw a path

You must first call calling the beginPath method () method

• arc (x, y, radius, start angle, end angle, rotation direction):
  is used to draw a circular path, to (x, y) as the center, the rotation direction of a bool value indicates whether the counterclockwise drawn from start angle and end angle unit is radians
• arcTo (x1, y1, x2, y2, radius):
  from (x1, x2) of a drawing start point to (x2, y2) of the arc, and the radius of the circular arc specified value
• bezierCurveTo (c1x, c1y, c2x,
  c2y, x, y): from a starting point to a draw (x, y) point of the curve, and in (c1x, c1y) and (c2x, c2y) control points point (i.e., rendering Bezier)
• lineTo (x, y):
  From a rendering point to (x, y) point of a straight line
• moveTo (x, y):
  the starting point is moved (x, y) point, does not draw a line
• quadraticCurveTo (cx, cy, x,
  y): From a rendering point to (x, y) of the quadratic curve point to (cx, cy) as the control point
• rect (x, y, width,
  height): from the point (x, y) starts to draw a rectangle, width height width
  height, where drawing a rectangular path, rather than a separate shape

Several operation after drawing is complete path
1. the closePath (): If you want to draw a line connecting the start point to the path, you can call the method
2. Fill (): with a filling pattern fillStyle
3. Stroke (): path stroked
4. Clip (): creates a clipping region on the path
For chestnut
draw a clock dial without digits

<script type="text/javascript">
		var drawing = document.getElementById('drawing');
		
		if(drawing.getContext){
			
			var context = drawing.getContext("2d");
			
			//开始路径
			context.beginPath();
			
			//绘制外圆
			context.arc(100,100,99,0,2 * Math.PI, false);
			
			//绘制内圆
			context.moveTo(194,100);
			
			context.arc(100,100,94,0,2 * Math.PI, false);
			
			//绘制分针
			context.moveTo(100,100);
			
			context.lineTo(100,15);
			
			//绘制时针
			context.moveTo(100,100);
			
			context.lineTo(35,100);
			
			//描边路径
			context.stroke();
		}
	</script>

In order to facilitate our control path, 2D context also provides a method:

isPointInPath (x, y) the method for determining the (x, y) is located on the path, the path is closed before the effective

Draw Text

the fillText () and strokeText ()
receives four parameters: the text string to be drawn, x coordinate, y coordinate, selectable maximum pixel width

Three properties:

• font:
  represents a text style, size and font, the font specified by the CSS format to specify

• textAlign:
  text alignment
  Possible values: "start" "end" " left" "right" "center"

• textBaseline:
  baseline of the text
  possible values: "top" "hanging" " middle" "alphabetic" "ideographic" "bottom"
  chestnuts
  draw numbers on the dial 12

			context.font = "bold 14px Arial";
			
			context.textAlign = "center";
			
			context.textBaseline="bottom";
			
			context.fillText("12",100,20);

the measureText () method of aid in determining the size of text

Convert

Modify the transformation matrix

• rotate (angle):
  rotating the image angle in radians about the origin;

• scale (scaleX, scaleY):
  scale the image, multiplied by scaleX in the x direction, the y direction by multiplying scaleY, the default value is 1.0;

• translate (x, y):
  The move to the coordinate origin (x, y). After performing this transformation, the coordinates (0, 0) becomes a point before represented by (x, y)

• transform (m1_1, m1_2, m2_1,
  m2_2, dx, dy): directly modify the transformation matrix, is multiplied by way of the following matrix:
  m1_1 m1_2 DX
  M2_1 M2_2 Dy
      0 0. 1

• setTransform (m1_1, m1_2, m2_1,
  m2_2, dx, dy): The transformation matrix reset to the default state, and then call the transform ()
  chestnuts
  while drawing hands, transformed to the origin center of the dial

//变换原点
context.translate(100,100);
//绘制分针
context.moveTo(0,0);
context.lineTo(0,-85);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);

Use rotate () method of rotating clock hands

context.rotate(1);

save () method to save the settings and context transformation (excluding context);
Restore () method returns an upwardly;

Draw image

drawImage () method

1. Passing an HTML element;
2. Another Incoming <canvas> element as its first parameter;

shadow

Attributes

1. shadowColor:
   shadow color represented by the CSS color format, the default black;

2. shadowOffsetX:
   Shadow Offset shape or path of the x-axis direction, the default 0;

3. shadowOffsetY:
   shape or path shadow offset y-axis direction, the default 0;

4. shadowBlur:
   number of blurred pixels, default 0;

Gradual change

1. createLinearGradient( )方法
2. the addColorStop () Method: Assigning a color, 0 to 1;
3. createRadialGradient( )方法

mode

Repeat
createPattern () Method:
The first parameter: HTML <img> element, <video> element, <canvas> element of
the second parameter: how to repeat character string image

Using image data

getImageData () method, putImageData () method

synthesis

globalAlpha: Specify all draw transparency
globalCompositionOperation: How graphics drawn in conjunction with the graphics drawn first

Recommend a super detailed canvas tutorials
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations