It cannot be drawn directly in convas, and it must be obtained by using this method.
Next.
☆ context.beginPath()Indicates the start of a new path drawing.
☆ context.isPointInPath(x, y)Determine whether a point is on the path. This method does not apply after the coordinate system is converted.
☆ context.moveTo(x,y)It is equivalent to lifting the brush from the drawing board, leaving the drawing board, and then positioning the tip at the
At the (x,y) coordinates, start a new drawing at this new position.
☆ context.lineTo(x, y)It is equivalent to the brush tip not leaving the drawing board, and the brush tip moves from the current coordinate position to
Draw a line segment at the coordinates (x,y).
☆ context.stroke()After drawing on convas, some drawing operations must call this method to allow the drawing to be inside
Content display.
☆ context.save()This method saves the current state of the convas, regardless of any changes to the convas in the future.
Just save the convas state before making these changes and you can call it later
The context.restore() method restores to the saved state. Usually drawn in a new section
or the original state of the convas should be saved before modifying the operation (no drawing or change is made
), restore it to its original state after a new draw or modify operation is completed. this
It is also conducive to future drawing operations.
In fact, canvas' 2D drawing environment context has many properties and some methods with
state-related, the value of each attribute is changed (or some method is used to change the drawing state),
The drawing state changes. If saved after each change, multiple states of a property will
Save it in the form of a stack, and the restore() party can be called multiple times in the order of the stack.
return to the corresponding saved state.
☆ context.translate(x, y)This method moves the current coordinate origin to (x, y).
☆ context.restore()Restore the convas state to the last saved state.
☆ context.closePath()This command is very similar in behavior to the lineTo
function, with the difference being that the destination is
automatically assumed to be the
origination of the path. However, the closePath also informs
the canvas that the current shape has closed or formed a
completely contained area. This will be useful for future
fills and strokes.
At this point, you are free to continue with more
segments in your path to create additional subpaths. Or you
can beginPath at any time to start over and clear the path
list entirely.
☆ context.fill();Fill the closed path after setting the fill style. No need to call this method after calling it
context.stroke() method.
☆ context.fillRect(x, y, width, height)Draw and fill the rectangular area with width and length (width, height) at (x, y). Adjust
After using this method, you do not need to call the context.stroke() method again.
☆ context.strokeRect(x, y, width, height)Draw a rectangular outline with width and length (width, height) at (x, y).
☆ context.clearRect(x, y, width, height)Cleaning position (the upper left corner of the rectangle) is at (x, y,), and the size is (width, height)
rectangular area.
Remove any content from the rectangular area and reset it
to its original, transparent color.
The ability to clear rectangles in the canvas is core to
creating animations and games using the HTML5 Canvas API. By
repeatedly drawing and clearing sections of the canvas, it
is possible to present the illusion of animation, and many
examples of this already exist on the Web. However, to
create animations that perform smoothly, you will need to
utilize clipping features and perhaps even a secondary
buffered canvas to minimize the flickering caused by
frequently canvas clears.
☆ context.drawImage( )This method has three overloads to draw the image on canvas. The image source can be
One frame of the img tag in the page, the image object in JS and video.
•context.drawImage(img, x, y)
Draw the image with image img at (x, y). When the size of canvas is larger than the image
, the entire image is drawn; when the image is larger than canvas, the excess is cropped.
•context.drawImage(img, x, y, w, h)
At (x, y), use image img to draw a rectangular area with length and width (w, h). image
The size of the sequential will change to (w, h).
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy,
cw, ch)
Take an img image as a drawing object, and the position on the img is (imgx, imgy
) The area with size (imgw, imgh) is drawn in canvas position (cx, cy)
Draw the area of size (cw, ch).
An exception is thrown if the crop area on the image is out of the image range.
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
Take a video object as a drawing object and grab the position on the video as (vx, vy
) A frame with size (vw, vh), draws large at the position on canvas (cx, cy)
Areas with small (cw, ch).
In addition, the first parameter of drawImage() can also be another canvas.
☆ context.getImageData(x, y, width, height)This method obtains the size (width, height) from the position inside canvas (x, y)
A pixel area, the return value is an ImageData object. ImageData has width,
height and data.
The data attribute is an array of pixels, and each four consecutive elements in the array represent an image
, four consecutive elements contain RGBA color and transparency information in turn. Four consecutive elements
The pixel must belong to a pixel, and the position of the first element is not taken at will.
The pixel array is specified in the canvas order from top to bottom and from left to right.
Scan to get. The number of elements in the pixel array is width * height * 4. To get a specific
Pixel information of the location.
If you open the web page using this method in a local file mode, it will not be normal
Working, security errors usually occur. You can upload files to
The web server then requests access to resolve this issue. And, the images involved, JS and
The HTML must be from the same domain name. However, IE9 can be accessed through local files.
An example is as follows:
Copy the code