Chapter 15 Using Canvas drawing

Chapter 15 Using Canvas drawing

15.1 Basic Usage

15.2 2D context

15.2.1 Fill and Stroke

15.2.2 Draw a rectangle

15.2.3 draw a path

15.2.4 Draw Text

15.2.5 transformation

15.2.6 drawn image

15.2.7 shadow

15.2.8 Gradient

15.2.9 Mode

15.2.10 using image data

15.2.11 synthesis

15.3 WebGL

15.3.1 modeled array

15.3.2 WebGL context

15.3.3 Support

15.4 Summary

Detailed chapters

15.1 Basic Usage

Use <canvas>element, you must set its width and height properties, the size of the designated area may be the drawing, the default width and height of 300 * 150.

15.2 2D context

The method of using the 2D drawing context provider can draw simple 2D graphics, such as rectangles, arcs and paths. 2D context coordinate began in <canvas>the upper left corner of the element, it is the origin of the coordinate (0,0). All coordinate values are calculated based on the far point, x larger value indicates right, y on the next larger value indicates. By default, width and height represent the number of pixels available on the two horizontal and vertical directions.

15.2.1 Fill and Stroke

fillStyle filling: is to use the specified style (color, gradient and image) filling pattern
srokeStyle Stroke: drawing is only an edge line pattern.
Both value of the property may be a string, an object or a gradient mode objects, and their default values are "# 000000." If the specified string value indicates the color, you can be specified in any format CSS color values.

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    context.strokeStyle = "red";
    context.fillStyle = "#0000ff";
}

15.2.2 Draw a rectangle

Is the only rectangle can be drawn directly in the context of the 2D shape. There are the following three methods, the method receives three four parameters: x coordinate of the rectangle, the y coordinate of the rectangle, rectangular width and height of the rectangle, these parameters are pixel units.
fillRect (): rectangle drawn will fill the specified color. Color attributes specified by fillStyle
strokeRect (): draw a rectangle with the specified color stroke. Stroke color designation by stokeStyle property
clearRect (): clear rectangular region on the canvas

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //绘制半透明的蓝色矩形
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    //绘制红色描边矩形
    context.stroketyle = "#ff0000";
    context.strokeRect(10,10,50,50);
    
    //绘制半透明的蓝色描边矩形
    context.strokeStyle = "rgba(0,0,255,0.5)";
    context.strokeRect(30,30,50,50);
}

The line width of the stroke by lineWidth attribute control, the value of the property may be any integer. Further, the shape may be controlled by the line end is blunt lineCap property (Butt), round (round) or square head (Square) can be controlled by the line of intersection attribute lineJoin way round post (round), angle (Bevel) or miter (miter).

15.2.3 draw a path

To draw a path, you must first call beginPath () method, pledged to begin a new path. And then to actually draw the path by calling the following methods:

• arc (x, y, radius, startAngle, endAngle, counterclockwise): In (x, y) to draw an arc of a circle, the radius of arc (in radians) as the RADIUS, the start and end angles of startAngle and endAngle. The last parameter indicates whether startAngle endAngle counterclockwise and calculated value of false indicates that the calculation clockwise.
• arcTo (x1, y1, x2, y2, radius): from the start point to draw an arc, to (x2, y2) so far, and the radius of a given radius passing through (x1, y1).
• bezierCurveTo (c1x, c1y, c2x, c2y, x, y): From the start drawing a curve point to (x, y) so far, and in (c1x, c1y) and (c2x, c2y) control point.
• lintTo (x, y): from the start point to draw a straight line up to (x, y)
• moveTo (x, y): to move the brush (x, y), does not draw the line
• quadraticCurveTo (cx, cy, x, y): from the start point to draw a quadratic curve, the (x, y) so far, and in (cx, cy) as control points
• rect (x, y, width, height): from the point (x, y) starts to draw a rectangle, the width and height specified by the width and height. This method of drawing a rectangular path, rather than the strokeRect () and the fillRect () independent of the shape drawn.

After you create a path, then there are several possible options:

• closePath (): draw a line connecting the start point to the path
• fill (): If the path has been completed, it is filled with the desired fillStyle
• stroke (): stroke path, strokeStyle stroke style may be provided
• clip (): Creates a clipping region on the path

15.2.4 Draw Text

There are two methods to draw text, fillText () and strokeText (), these two methods can receive four parameters: the text string to be drawn, x coordinate, y coordinate, and optionally a maximum pixel width. And that the two methods are based on the following three properties:

• font: represents a text style, size and font, the font format specified by CSS to specify, for example, "10px Arial"
• textAlign: represents the text alignment. Possible values ​​are "start", "end", "left", "right", "center", recommend the use of "start", "end", do not use the "left", "right", since both former meaning more secure, it could also fit right and right-to-left languages
• textBaselint: represents the baseline of the text. Possible values ​​are "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"

the fillText () method uses the property fillStyle draw text
strokeText () method uses the property of text stroke strokeStyle

15.2.5 transformation

rotate (angle): rotation around the origin image angle in radians
scale (scaleX, scaleY): scale the image, rest assured multiplied scaleX in x, multiplied by the scaleY in the y direction. scaleX and scaleY default value is 1.0.
translate (x, y): move to the origin of the coordinate (x, y). After performing this transformation, the coordinates (0, 0) will be represented by a point before into (X, Y)
Transform (m1_1, m1_2, m2_1m2_2, DX, Dy): directly modify the transformation matrix is multiplied by the following matrix manner.
DX m1_2 m1_1
M2_1 M2_2 Dy
0 0. 1
the setTransform (m1_1, m1_2, m2_1m2_2, DX, Dy): The transformation matrix reset to the default state, and then call the transform ()

save () to save the current state of the environment and should restore () paired
save () method to save the settings and converting only drawing context, and does not save the contents of drawing context

15.2.6 drawn image

ctx.drawImage () draw the image onto the canvas, the canvas or the video
position the image on the canvas:
context.drawImage (IMG, X, Y);

Position the image on the canvas, and a predetermined width and height of the image:
context.drawImage (IMG, X, Y, width, height);

Cut image, and positioning the cut portions on the canvas:
ctx.drawImage (IMG, SX, SY, SWidth, sheight, X, Y, width, height) image rendering, video onto the canvas or the canvas, it is possible to draw part of the image, and / or increase or decrease the size of the image.
image img provide for the use of canvas or video.
sx optional. Cut start position of the x coordinate.
sy optional. Y position of start of cutting.
swidth optional. It is the width of the cutout image.
sheight optional. Highly cutout image.
x the x coordinate position of an image is placed on the canvas.
y the y coordinate position of the image placed on the canvas.
width optional. Width of the image to be used. (Extended or reduced image)
height optional. To use the height of the image. (Extended or reduced image)

15.2.7 shadow

ctx.shadowColor: Sets or returns the color for the shadow, the default is black
ctx.shadowBlur: Sets or returns the level of blur for shadow, pure numbers without units. Default is 0
ctx.shadowOffsetX: shadow sets or returns the distance from the horizontal shape, draw a rectangle with shaded shifted 20 pixels to the right (from the left position of the rectangle) without digital-Default is 0
ctx.shadowOffsetY : sets or returns the vertical distance from the shading shape, draw a rectangle hatched with downwardly offset 20 pixels (from the top position of the rectangle) of pure numbers without default is 0

15.2.8 Gradient

ctx.createLinearGradient (0,0,175,50) to create linear gradient (with the canvas content) before the two are horizontal and vertical coordinates of the start, after the end of the two horizontal and vertical coordinates. Gradient can be used to fill rectangles, circles, lines, text, and so on.
ctx.createPattern () is repeated the specified element in the direction of the specified
elements may be images, videos, or other canvas element.
Repeated elements for drawing / fill rectangle, circle, line, or the like.

ctx.createRadialGradient (75,50,5,90,60,100) create radial, annular radial gradient created / circular gradient object (with the content on the canvas) method. Start the gradient circle x, y coordinates, the radius of the circle starts, the end of the gradient circle x, y coordinates, the end of the radius of the circle
gradient used to fill rectangles, circles, lines, text, and so on.
Tip: Use the object as strokeStyle or fillStyle value of the property.
Tip: Use the addColorStop () method of predetermined different color, gradient color, and where to locate the object.

context.createRadialGradient (x0, y0, r0, x1, y1, r1);
beginning circle x-coordinate x0 gradient
beginning gradient circle y coordinate y0
radius r0 of the circle beginning
end of the gradient circle x1 x coordinate of
the end of the gradient y1 circle y coordinate
r1 end radius of a circle

ctx.addColorStop (0, "# FF0000" ) a predetermined color and gradation object stop position, the position of the gradient color appears (section 0-1), the color and
the addColorStop () method with a The createLinearGradient () or The createRadialGradient () .
Note: You can call multiple times addColorStop () method to change the gradient. If you do not object using the gradient method, the gradient will not be visible. In order to obtain a visible gradient, you need to create at least one color.

gradient.addColorStop (STOP, Color);
STOP value between 0.0 and 1.0, indicates a position between the start and end of the gradient.
CSS color values in the color displayed at the end position

15.2.9 Mode

context.createPattern (image, "repeat | repeat -x | repeat-y | no-repeat");
picture image specified to be used, canvas or video elements.
repeat default. This pattern is repeated in the horizontal and vertical directions.
repeat-x mode is only repeated in the horizontal direction.
repeat-y mode is only repeated in the vertical direction.
The no-repeat mode is only displayed once (no repeat).