This is the fourth day of my participation in the August More text Challenge. For details, see more text Challenge

canvas

Canvas is a new tag in HTML5 that provides a “canvas”

You can use the Canvas element to obtain the corresponding “context” (which can be understood as the brush) to manipulate the displayed content

The standard properties of Canvas are width and height(such as ID, class and so on).

Width: indicates the width of canvas

Hieght: Indicates the height of canvas

Style:

How to get a brush:

1 Get the corresponding Canvas element

// Get the corresponding Canvas element
var canvas = document.getElementById("myCanvas");
Copy the code

Get the brush from the Canvas element

// Get the brush from the Canvas element
var ctx = canvas.getContext("2d");
Copy the code

View brushes:

Properties:

Methods:

Small cases:

/ / draw circles
// Open the path
ctx.beginPath();
/ / draw arc
ctx.arc(100.100.50.0.Math.PI * 2.true);
// Close the path
ctx.closePath();
// Fill method
ctx.fill();
Copy the code

Results:

Coordinate system

Canvas is already the lowest level element and has no children

So the positioning coordinate system is meaningless for canvas, but canvas is used to display images, so it comes with a coordinate system

The default is consistent with the positioning coordinate system of the element

API

Most of the canvas is working on the path, so you need to turn on the path before drawing the graph

BeginPath (): starts the path

ClosePath (): used to close a path. When a path is closed, a thread is formed between the point at which it was closed and the point at which it started

  • fillRect(x, y, w, h)

X: point x in the current coordinate system

Y: point Y in the current coordinate system

W: The width of the rectangle

H: The height of the rectangle

  • strokeRect(x, y, w, h)

X: point x in the current coordinate system

Y: point Y in the current coordinate system

W: The width of the rectangle

H: The height of the rectangle

  • clearRect(x, y, w, h)

X: point X in the region (top left)

Y: y point in the region (top left)

W: The width of the area

H: The height of the area

  • arc(x, y, r, star, end, dir)

X: point x in the center of the circle where the arc is located

Y: point Y of the center of the circle where the arc is located

Star: start position of an arc

End: the end position of the arc

“Dir” : indicates the direction false: indicates the clockwise direction true: indicates the counterclockwise direction

Fill: used to add a path

Stroke: Stroke path

Font (): Changes the text style

LineWidth: changes the lineWidth

StrokeStyle: Change the stroke color

FillStyle: Changes the fill color

Draw pictures

To place an image on the canvas: 1 insert image; 2 set background image; 3drawImage

drawImage

There are three ways to draw pictures:

Draw the picture in full size

ctx.drawImage(img, x, y)

Img: the picture to draw

X: The x point on the current canvas

Y: of y on the current canvas

2 Zoom

ctx.drawImage(img, x, y, w, h)

Img: the picture to draw

X: The x point where the scaled image is placed on the canvas

Y: the y point where the scaled image is placed on the canvas

W: The width of the zoomed image

H: The height of the zoomed image

 

3 Capture the image and scale it

ctx.drawImage(img, img_x, img_y, img_w, img_h, canvas_x, canvas_y , canvas_w, canvas_h )

Img: the picture to draw

Img_x: the x point of the image to be captured

Img_y: y point of the image to be captured

Img_w: The width of the image to be captured

Img_h: The height of the image to be captured

Canvas_x: Place the captured image on the canvas at x point

Canvas_y: Place the captured image on the y point of the canvas

Canvas_w: The width of the captured image placed on the canvas

Canvas_h: The height of the captured image to be placed on the canvas

Gets the pixels on the canvas

getImageData

This method is used to get the pixel information on the canvas and return an object

Usage:

GetImageData (x, y, w, h) x: point X of the rectangular region to be obtained y: point Y of the rectangular region to be obtained w: width of the rectangle h: height of the rectangleCopy the code

Features: Requires a server environment

For example:

// Add the click event
getPX.onclick = function() {
// Get the pixel information
var imgData = ctx.getImageData(0.0.1024.680);
console.log(imgData);
}
Copy the code

Output:

putImageData

This method is used to put the object retrieved by getImageData back on the canvas.

ctx.putImageData(imgData, x, y);

ImgData: Modified pixel object

X: The x point placed on the canvas

Y: the y point placed on the canvas

merge

The so-called fusion is the overlay between the new image and the original image when drawing on the canvas.

Learn to overlay old shapes with new ones.

ctx.globalCompositeOperation

The source – over the default. Displays the source image on the target image.

Source-atop displays the source image at the top of the target image. The part of the source image that is outside the target image is not visible.

Source-in Displays the source image in the target image. Only the source image within the target image is displayed. The target image is transparent.

Source-out displays the source image outside of the target image. Only the source image outside the target image is displayed, and the target image is transparent.

Destination-over displays the target image above the source image.

Destination-atop displays the target image at the top of the source image. Parts of the target image other than the source image are not displayed.

Destination-in displays the target image in the source image. Only the part of the target image within the source image is displayed. The source image is transparent.

Destination-out displays the target image outside the source image. Only the part of the target image outside the source image will be displayed. The source image is transparent.

Lighter displays the source image + target image.

Copy Displays the source image. Ignore the target image.

Xor uses xor operations to combine source and target images.