Canvas uses the note

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

1,Canvas Chinese tutorial

2,Canvas the default width and height is 300150, in order to avoid abnormal, it is best to use the display properties add not by CSS to add width and height

3,Within a canvas tag added not a browser that supports the canvas tag description

4,The following JS code can judge whether the browser supports canvas

  

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

5,Drawing, canvas supports only a basic shape is rectangular, but other graphics can be drawn through a canvas path

6,Draw a rectangle has four functions: rect, fillRect, strokeRect and clearRect

7,The role of beginPath is used to start a new path layer, if not that draw in the original path layer, the following two section of code effect is completely different, the first code shows two red lines, second pieces of code to display a black and a red line

var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();

  

var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();

8,If no path is closed, closePath can not, if you use the fill path will be automatically closed, do not need to use the closePath.

9,As long as there is enough patience can draw any graphics using Bessel curve

10,Two times square curve in the presence of bug Firefox, so you can use three party curve instead of two square curve

11,Image (such as PNG, GIF, JPEG) can be introduced into the canvas, and other canvas elements can be used as the image source

12,The following are the basic canvas image rendering code, including   image  image or canvas object, x  and   y is the target canvas in the initial coordinates

drawImage(image, x, y)

  The following code said China "image, width and height scaling dimensions

drawImage(image, x, y, width, height)

  The following code said cutting pictures, the first parameter and the other is the same, it is a reference to an image or another canvas. The initial x coordinates in the picture cuts represent the other 8 parameters, the initial y coordinate picture cut, cut width, height reduction of area, the painting location coordinates x, y coordinates of the location of the painting, painting graphics width, height of the drawing, the size of the cropped area is with drawn figure size is not the same, will be scaled to the picture the size

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

13,strokeStyle Is used to set the image contour color, but   fillStyle  is used to set the fill color. Color  can be a string representing a CSS color value, gradient object or pattern object. By default, line and fill color is black (CSS color value #000000).

14,Image transparency can use globalAlpha  = transparency value or RGBA color values to represent

15,The lineWidth property sets the current line thickness, in order to solve the problem of 1px line width of bug, using +0.5 method to solve

16,lineCap Properties of the line on the left uses the default   butt . Note that it is flush with the auxiliary line. In the middle is   round  the effect of endpoint, plus a radius of half the width of the line. On the right is   square  effect, the endpoint with an equal width and height is half the width of the line box

17,lineJoin Here I also attribute with three paths, set different   lineJoin  value;. The above is a   round  effect, the corners are rounded, the radius of the circle is equal to the width. The middle and bottom are bevel and miter effect. When the value is   miter  when in connection, line extending outside until the intersect at one point, extending effect is below will introduce   miterLimit  attribute constraints

18,save And   restore  method is used to save and restore the canvas state, no parameters. The Canvas state is all style current screen applications and a snapshot of deformation. The Canvas state is to heap (stack) way to preserve, each call to   save  method, the state will be pushed into stored heap. Each call to   restore , the last saved state from the stack, all settings are restored.

19,transform(1, 0, 0, 1, 0, 0)Parameters represent the horizontal zoom, rotate in a horizontal direction (clockwise), the vertical direction (counterclockwise), perpendicular to the direction of China ", the horizontal offset, the vertical offset

  setTransform(1, 0, 0, 1, 0, 0)Said a former reset transform matrix then build new matrix, parameters.

  rotate(angle), (a radius equal to 1 rad, 2π r/r= 360=2&pi, namely 1 radian;=π/180)

20,Animation is constantly emptied Sketchpad (clearRect ()), and then redraw

 



Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Gerald at December 18, 2013 - 5:22 PM