1, first obtain the canvas page
var canvas = document.querySelector ( "canvas" );
2. Create a brush
canvas.getContext context = var ( "2D");
. 3, to select the manner of painting, for painting
1.context.stroke () Stroke
context.strokeStyle = "# f00" stroke style
2.context.fill () filled
context.fillStyle = "# f00"; fill pattern
1, drawing rectangles
x, y, w, h representing horizontal and vertical coordinates and width and height
context.strokeRect (x, y, w, h) stroke rectangular
context.fillRect (x, y, w, h); fill a rectangle
2, Gradient
create gradient objects
var g = context.createLinearGradient (50,100,550,100);
add color
g.addColorStop (0, "# F00")
g.addColorStop (0.5, "# FFF")
g.addColorStop (. 1, "# f0f" );
using a gradient fill objects
context.fillStyle = G
context.fillRect (50,50,500,200);
3, drawing text
context.strokeText ( "want to paint text", x, y) stroke text
context.fillText ( "....", x, y) is filled text
var text = "A playing intend to fight." ;
context.measuerText (text) .wifth acquired width of the text
context.measureText (text) .heght acquired height of the text
context.textBaseline = "top" of the text baseline
default value: alphabetic third wire
property values: top middle bottom
4, the drawing (path)
(Note: It is the beginning of a path is closed after the pen when drawing the drawing is complete path)
context.beginPath () the beginning of a path
of a point context.moveTo (x, y) starting
context.lineTo (x, y) after a point, there may be a plurality of
context.fill () filled segment of the path
context.stroke () stroke segment of the path
context.closePath (); end segment of the path drawn
Draw a circle
context.arc (x, y, r, start, end) are: horizontal and vertical coordinates, radius arc at the start of arc at the end
context.fill () fill the circle
context.stroke () This stroke circle
5, draw pictures
to create a img objects
var img = new Image ();
add the image path
img.src = ""
Because src asynchronous, fully loaded img need to wait to finish to draw
img.onload = function () {
context.drawImage (IMG, X, Y, W, H);
}
6, some methods commonly used canvas, attributes
context.fill () filling method
context.stroke () method stroked
context.clip () Shear Method
context.lineWidth = "10" border width setting
context.fillStyle = "# f00 "fill pattern
context.strokeStyle =" # f00 "stroke style
context.textBaseline =" top "baseline setting mode, parameters .. Middle Top
context.measureText (TXT) .width acquired width of the text
context.font =" 10px SieHer "set the font size and style, two parameters are required
context.getContext (" 2d ") obtained 2d brush
context.beginPath (); the beginning of a path
context.closePath (); the end of a path
context.scale (0.9,0.9) the coordinates of the zoom magnification
context.drawImage (img, x, y, w, h); picture drawn on the canvas
context.save (); to save the drawing context, the current deformation data (coordinates ah what what)
context.restore (); brush to restore the last saved state of deformation
context.translate ();Change the coordinates of the origin of the change (translate)
context.rotate (); brush rotation