JS Canvas interface and animation effects

Overview

The <canvas> element is used to generate images. It itself is like a canvas, and JavaScript generates images on it by operating its API. Its underlying structure is pixels, and <canvas> is basically a bitmap that can be manipulated with JavaScript.

The difference between it and SVG images is that <canvas> is a script that calls various methods to generate images, while SVG is an XML file that generates images through various sub-elements.

Before using the Canvas API, you need to create a new <canvas> element in the web page.

<canvas id="myCanvas" width="400" height="250">
  Your browser does not support canvas!
</canvas>

If the browser does not support this API, the text in the middle of the <canvas> tag will be displayed: "Your browser does not support Canvas".

Each <canvas> element has a corresponding CanvasRenderingContext2D object (context object). The Canvas API is defined on this object.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

In the above code, the getContext() method of the <canvas> element node object returns the CanvasRenderingContext2D object.

Note that the Canvas API requires the getContext method to specify the parameter 2d, which means that the <canvas> node generates a 2D flat image. If the parameter is webgl, it means it is used to generate 3D stereo patterns, which belongs to the WebGL API.

According to usage, Canvas API is divided into two parts: drawing graphics and image processing.

Canvas API: Drawing Graphics

The Canvas canvas provides a plane space for drawing, and each point in this space has its own coordinates. The origin (0, 0) is located at the upper left corner of the image, the positive direction of the x-axis is to the right of the origin, and the positive direction of the y-axis is to the bottom of the origin.

path

The following methods and properties are used to draw paths.

• CanvasRenderingContext2D.beginPath(): starts drawing the path.
• CanvasRenderingContext2D.closePath(): Ends the path and returns to the starting point of the current path. A straight line will be drawn from the current point to the starting point. If the shape is already closed, or has only one point, this method has no effect.
• CanvasRenderingContext2D.moveTo(): ​​Sets the starting point of the path, that is, moves the starting point of a new path to the (x, y) coordinate.
• CanvasRenderingContext2D.lineTo(): ​​Connects the current point to the (x, y) coordinate using a straight line.
• CanvasRenderingContext2D.fill(): Fill the inside of the path with color (black by default).
• CanvasRenderingContext2D.stroke(): Path line coloring (black by default).
• CanvasRenderingContext2D.fillStyle: Specifies the color and style of the path fill (black by default).
• CanvasRenderingContext2D.strokeStyle: Specifies the color and style of the path line (black by default).

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

The above code only determines the shape of the path, which cannot be seen on the canvas because there is no color. So coloring is needed.

ctx.fill();
// or ctx.stroke();

In the above code, both methods can make the path visible. fill() fills the inside of the path with color to make it a solid shape; stroke() only colors the path lines.

Both methods use black by default, and you can specify other colors using the fillStyle and strokeStyle properties.

ctx.fillStyle = "red";
ctx.fill();
// or ctx.strokeStyle = "red";
ctx.stroke();

The above code specifies the fill and line color as red.

Line Type

The following methods and properties control the visual characteristics of lines.

• CanvasRenderingContext2D.lineWidth: specifies the width of the line, the default is 1.0.
• CanvasRenderingContext2D.lineCap: Specifies the style of the line end. There are three possible values: butt (default value, the end is a rectangle), round (the end is a circle), and square (the end is a protruding rectangle with the same width and a height of half the line width).
• CanvasRenderingContext2D.lineJoin: Specifies the style of the line segment intersection. There are three possible values: round (the intersection is a fan), bevel (the intersection is the base of a triangle), and miter (the default value, the intersection is a diamond).
• CanvasRenderingContext2D.miterLimit: Specifies the length of the intersection diamond, the default is 10. This attribute is only valid when the value of the lineJoin attribute is equal to miter.
• CanvasRenderingContext2D.getLineDash(): Returns an array representing the length of the line segments and spacing inside the dashed line.
• CanvasRenderingContext2D.setLineDash(): Array, used to specify the length of the line segments and spacing inside the dashed line.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.setLineDash([15, 5]);
ctx.stroke();

In the above code, the line width is 3, the ends and intersections of the lines are rounded, and set to dashed lines.

rectangle

The following method is used to draw a rectangle.

• CanvasRenderingContext2D.rect(): Draw a rectangular path.
• CanvasRenderingContext2D.fillRect(): Fills a rectangle.
• CanvasRenderingContext2D.strokeRect(): draws a rectangular border.
• CanvasRenderingContext2D.clearRect(): All pixels in the specified rectangular area become transparent.

The formats of the above four methods are the same. They all accept four parameters, namely the horizontal and vertical coordinates of the upper left corner of the rectangle, the width and height of the rectangle.

The CanvasRenderingContext2D.rect() method is used to draw a rectangular path.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.rect(10, 10, 100, 100);
ctx.fill();

The above code draws a square with the upper left corner at (10, 10) and a width and height of 100.

CanvasRenderingContext2D.fillRect() is used to fill a rectangular area with color.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

The above code draws a green square with the upper left corner coordinates of (10, 10) and a width and height of 100.

CanvasRenderingContext2D.strokeRect() is used to draw the border of a rectangular area.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);

The above code draws a green hollow square with the coordinates of the upper left corner at (10, 10) and a width and height of 100.

CanvasRenderingContext2D.clearRect() is used to erase the pixel color of the specified rectangular area, which is equivalent to removing all previous drawing effects.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(15, 15, 90, 90);

The above code first draws a 100 x 100 square, and then erases the 90 x 90 area inside it, which is equivalent to forming a 5-pixel-wide border.

Arc

The following methods are used to draw arcs.

• CanvasRenderingContext2D.arc(): Draws an arc by specifying the center and radius.
• CanvasRenderingContext2D.arcTo(): ​​Draws an arc by specifying two tangents and a radius.

CanvasRenderingContext2D.arc() is mainly used to draw circles or sectors.

// Format ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

// Example ctx.arc(5, 5, 5, 0, 2 * Math.PI, true);

The x and y parameters of the arc() method are the coordinates of the center of the circle, radius is the radius, startAngle and endAngle are the starting and ending angles of the sector (expressed in radians), and anticlockwise indicates whether the drawing should be counterclockwise (true) or clockwise (false). This parameter is used to control the direction of the sector (for example, upper semicircle or lower semicircle).

Below is an example of drawing a filled circle.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
ctx.fill();

The above code draws a complete circle with a radius of 50, a starting angle of 0, and an ending angle of 2 * PI.

Example of drawing a hollow semicircle.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.arc(100, 20, 50, 0, Math.PI, false);
ctx.stroke();

The CanvasRenderingContext2D.arcTo() method is mainly used to draw an arc. It requires the coordinates of two points. The current point and the first point form a straight line, the first point and the second point form another straight line, and then draw an arc tangent to the two straight lines.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arcTo(50, 50, 100, 0, 25);
ctx.lineTo(100, 0);
ctx.stroke();

In the above code, arcTo() has 5 parameters. The first two parameters are the coordinates of the first point, the third and fourth parameters are the coordinates of the second point, and the fifth parameter is the radius. Then, (0, 0) and (50, 50) form a straight line, and then (50, 50) and (100, 0) form a second straight line. The arc is the part that is tangent to these two lines.

text

The following methods and properties are used to draw text.

• CanvasRenderingContext2D.fillText(): Draws solid characters at the specified location.
• CanvasRenderingContext2D.strokeText(): Draws hollow characters at the specified location.
• CanvasRenderingContext2D.measureText(): Returns a TextMetrics object.
• CanvasRenderingContext2D.font: Specifies the font size and font. The default value is 10px sans-serif. CanvasRenderingContext2D.textAlign: The alignment of the text. The default value is start.
• CanvasRenderingContext2D.direction: The direction of the text. The default value is inherit.
• CanvasRenderingContext2D.textBaseline: The vertical position of the text. The default value is alphabetic.

The fillText() method is used to draw solid characters at the specified position.

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth])

This method accepts four parameters.

• text: The string to be filled.
• x: The horizontal coordinate of the starting point of the text, in pixels.
• y: The vertical coordinate of the starting point of the text, in pixels.
• maxWidth: The maximum pixel width of the text. This parameter is optional. If omitted, it means there is no width limit. If the actual length of the text exceeds the value specified by this parameter, the browser will try to fill it with a smaller font.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillText("Hello world", 50, 50);

The above code writes the string Hello world at position (50, 50).

Note that the fillText() method does not support line breaks; all text must appear on one line. If you want to generate multiple lines of text, just call the fillText() method multiple times.

The strokeText() method is used to add hollow characters. Its parameters are the same as fillText().

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeText("Hello world", 50, 50);

The text drawn by the above two methods is 10px in size and sans-serif font by default. The font attribute can change the font settings. The value of this attribute is a string, which can be set using the CSS font attribute.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "Bold 20px Arial";
ctx.fillText("Hello world", 50, 50);

The textAlign attribute is used to specify the alignment of the text. It can take the following values.

• left: left alignment
• right: right alignment
• center: centered
• start: The default value, the starting point is aligned (text from left to right is left-aligned, and text from right to left is right-aligned).
• end: End alignment (right alignment for left-to-right text and left alignment for right-to-left text).

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "Bold 20px Arial";
ctx.textAlign = "center";
ctx.fillText("Hello world", 50, 50);

The direction attribute specifies the direction of the text. The default value is inherit, which means inheriting the settings of <canvas> or document. Other values ​​include ltr (left to right) and rtl (right to left).

The textBaseline property specifies the vertical position of the text and can take the following values.

• top: top alignment (the baseline of the letters is moved up as a whole).
• Hanging: Hanging alignment (the top edge of the letters is on a straight line), suitable for Hindi and Tibetan.
• middle: center alignment (the middle lines of the letters are on a straight line).
• alphabetic: The default value, which means that the letters are placed in the normal position of the alphabet (the third line of the four-line grid).
• Ideographic: Descending alignment (the bottom edges of letters are on a straight line), used in East Asian scripts.
• bottom: bottom alignment (the baseline of the letters moves down). For English letters, this setting is no different from ideographic.

The measureText() method accepts a string as a parameter and returns a TextMetrics object, from which you can get information about the parameter string, currently mainly the width of the text after rendering.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var text1 = ctx.measureText("Hello world");
text.width; // 49.46

ctx.font = "Bold 20px Arial";
text2.width; // 107.78

In the above code, the 10px string Hello world has a width of 49.46 after rendering. After enlarging to 20px, the width is 107.78.

Gradient and image fills

The following methods are used to set gradient effects and image fill effects.

• CanvasRenderingContext2D.createLinearGradient(): defines a linear gradient style.
• CanvasRenderingContext2D.createRadialGradient(): defines the radial gradient style.
• CanvasRenderingContext2D.createPattern(): defines the image fill style.

The createLinearGradient() method generates a linear gradient style according to a given straight line.

ctx.createLinearGradient(x0, y0, x1, y1);

The ctx.createLinearGradient(x0, y0, x1, y1) method accepts four parameters: x0 and y0 are the horizontal and vertical coordinates of the starting point, and x1 and y1 are the horizontal and vertical coordinates of the end point. By using different coordinate values, you can generate a gradient from top to bottom, from left to right, and so on.

The return value of this method is a CanvasGradient object, which has only one addColorStop() direction, which is used to specify the color of the gradient point. The addColorStop() method accepts two parameters. The first parameter is a position between 0 and 1, 0 represents the starting point, and 1 represents the end point. The second parameter is a string representing the CSS color.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

In the above code, after defining the gradient style gradient, this style is assigned to the fillStyle attribute, and then fillRect() will generate a rectangular area filled with this style.

The createRadialGradient() method defines a radial gradient and requires specifying two circles.

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

The createRadialGradient() method accepts six parameters, x0 and y0 are the center coordinates of the circle where the radiation starts, r0 is the radius of the starting circle, x1 and y1 are the center coordinates of the circle where the radiation ends, and r1 is the radius of the ending circle.

The return value of this method is also a CanvasGradient object.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);

In the above code, after generating the radial pattern, a rectangle is filled with this pattern.

The createPattern() method defines an image fill pattern that repeats the image in the specified direction to fill the specified area.

ctx.createPattern(image, repetition);

This method accepts two parameters. The first parameter is the image data, which can be an <img> element, another <canvas> element, or a Blob object representing the image. The second parameter is a string with four possible values: repeat (bidirectional repeat), repeat-x (horizontal repeat), repeat-y (vertical repeat), and no-repeat (no repeat). If the second argument is an empty string or null, it is equivalent to null.

The return value of this method is a CanvasPattern object.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.src = "upload/2022/web/pattern.png";
img.onload = function() {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};

In the above code, after the image is loaded successfully, createPattern() is used to generate the image style, and then this style is used to fill the specified area.

shadow

The following properties are used to set shadows.

• CanvasRenderingContext2D.shadowBlur: The blurriness of the shadow. The default value is 0.
• CanvasRenderingContext2D.shadowColor: The color of the shadow, the default is black.
• CanvasRenderingContext2D.shadowOffsetX: The horizontal displacement of the shadow, the default is 0.
• CanvasRenderingContext2D.shadowOffsetY: The vertical displacement of the shadow, the default is 0.

Here is an example.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

Canvas API: Image Processing

CanvasRenderingContext2D.drawImage()

The Canvas API allows you to write image files to the canvas by reading the image and then using the drawImage() method to put the image on the canvas.

CanvasRenderingContext2D.drawImage() has three usage formats.

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

The meaning of each parameter is as follows.

• image: image element
• sx: The horizontal coordinate inside the image, used to map to the placement point on the canvas.
• sy: The vertical coordinate inside the image, used to map to the placement point on the canvas.
• sWidth: The width of the image on the canvas, which will produce a scaling effect. If not specified, the image will not be scaled and will take up the entire width of the canvas.
• sHeight: The height of the image on the canvas, which will produce a scaling effect. If not specified, the image will not be scaled and will take up the actual height of the canvas.
• dx: The horizontal coordinate inside the canvas, used to place the upper left corner of the image
• dy: The vertical coordinate inside the canvas, used to place the upper right corner of the image
• dWidth: The width of the image inside the canvas, which will produce a scaling effect.
• dHeight: The height of the image inside the canvas, which will produce a scaling effect.

The following is the simplest usage scenario, where the image is placed on the canvas and the upper left corners of the two are aligned.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.src = "image.png";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

The above code puts a PNG image into the canvas. At this time, the image will be of its original size. If the canvas is smaller than the image, only the upper left corner of the image, which is exactly the size of the canvas, will be displayed.

If you want to display the entire image, you can use the image's width and height to set the canvas' width and height.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var image = new Image(60, 45);
image.onload = drawImageActualSize;
image.src = "upload/2022/web/image.jpg";

function drawImageActualSize() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
}

In the above code, the size of the <canvas> element is set to the original size of the image, which ensures that the image can be fully displayed. Since the original size of the image can only be obtained after the image is loaded successfully, the adjustment of the canvas size must be placed in the image.onload listening function.

Pixel reading and writing

The following three methods are related to pixel reading and writing.

• CanvasRenderingContext2D.getImageData(): Read the canvas as an ImageData object
• CanvasRenderingContext2D.putImageData(): Writes an ImageData object to the canvas
• CanvasRenderingContext2D.createImageData(): Generates an ImageData object

(1) getImageData()

The CanvasRenderingContext2D.getImageData() method is used to read the contents of <canvas> and return an ImageData object containing information about each pixel.

ctx.getImageData(sx, sy, sw, sh);

The getImageData() method accepts four parameters. sx and sy are the coordinates of the upper left corner of the read area, and sw and sh are the width and height of the read area. If you want to read the entire <canvas> area, you can write it as follows.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

The getImageData() method returns an ImageData object. This object has three properties.

• ImageData.data: A one-dimensional array. The values ​​of this array are the red, green, blue, and alpha channel values ​​of each pixel (each value ranges from 0 to 255), so the length of this array is equal to the pixel width of the image x the pixel height of the image x 4. This array is not only readable but also writable, so by operating this array, the purpose of operating the image can be achieved.
• ImageData.width: A floating point number representing the pixel width of the ImageData.
• ImageData.height: A floating point number representing the pixel height of ImageData.

(2) putImageData()

The CanvasRenderingContext2D.putImageData() method draws the pixels of the ImageData object onto the <canvas> canvas. This method can be used in two formats.

ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

This method has the following parameters.

• imagedata: An ImageData object containing pixel information.
• dx: The horizontal coordinate inside the <canvas> element, used to place the upper left corner of the ImageData image.
• dy: The vertical coordinate inside the <canvas> element, used to place the upper left corner of the ImageData image.
• dirtyX: The horizontal coordinate inside the ImageData image, used as the horizontal coordinate of the upper left corner of the rectangular area placed on the <canvas>. The default value is 0.
• dirtyY: The vertical coordinate inside the ImageData image, used as the vertical coordinate of the upper left corner of the rectangular area placed on the <canvas>. The default value is 0.
• dirtyWidth: The width of the rectangular area placed on <canvas>. The default is the width of the ImageData image.
• dirtyHeight: The height of the rectangular area placed on <canvas>. The default is the height of the ImageData image.

The following is an example of drawing an ImageData object to a <canvas>.

ctx.putImageData(imageData, 0, 0);

(3) createImageData()

The CanvasRenderingContext2D.createImageData() method is used to generate an empty ImageData object where all pixels are transparent black (that is, each value is 0). This method can be used in two formats.

ctx.createImageData(width, height);
ctx.createImageData(imagedata);

The parameters of the createImageData() method are as follows.

• width: The width of the ImageData object in pixels.
• height: The height of the ImageData object in pixels.
• imagedata: An existing ImageData object, the return value will be a copy of this object.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var imageData = ctx.createImageData(100, 100);

In the code above, imageData is a 100 x 100 pixel area where each pixel is transparent black.

CanvasRenderingContext2D.save(), CanvasRenderingContext2D.restore()

The CanvasRenderingContext2D.save() method is used to save the current style of the canvas to the stack, which is equivalent to generating a style snapshot in memory.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.save();

In the code above, save() will create a snapshot of the canvas's default style.

The CanvasRenderingContext2D.restore() method restores the style of the canvas to the last saved snapshot, or has no effect if there is no saved snapshot.

Context environment, the restore method is used to restore to the last saved context environment.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.save();

ctx.fillStyle = "green";
ctx.restore();

ctx.fillRect(10, 10, 100, 100);

The above code draws a rectangle. The fill color of the rectangle was originally set to green, but the restore() method undoes this setting and restores the style to the last saved state (that is, the default style), so the actual fill color is black (the default color).

CanvasRenderingContext2D.canvas

The CanvasRenderingContext2D.canvas property points to the <canvas> element where the current CanvasRenderingContext2D object is located. This property is read-only.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.canvas === canvas; // true

Image Transformation

The following methods are used for image transformations.

• CanvasRenderingContext2D.rotate(): image rotation
• CanvasRenderingContext2D.scale(): Image scaling
• CanvasRenderingContext2D.translate(): Image translation
• CanvasRenderingContext2D.transform(): Complete image transformation through a transformation matrix
• CanvasRenderingContext2D.setTransform(): Cancel the previous image transformation

(1) rotate()

The CanvasRenderingContext2D.rotate() method is used to rotate the image. It accepts a radian value as a parameter, representing the number of degrees to rotate clockwise.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

The above code will display a rectangle tilted 45 degrees clockwise. Note that the rotate() method must be called before the fillRect() method, otherwise it will not work.

The rotation center point is always the origin at the upper left corner of the canvas. If you want to change the center point, you need to move the canvas using the translate() method.

(2) scale()

The CanvasRenderingContext2D.scale() method is used to scale the image. It accepts two parameters, the scaling factor in the x-axis direction and the scaling factor in the y-axis direction. By default, one unit is one pixel, and the scaling factor can scale the unit. For example, a scaling factor of 0.5 means reducing the size to 50% of the original size, and a scaling factor of 10 means enlarging it tenfold.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.scale(10, 3);
ctx.fillRect(10, 10, 10, 10);

In the above code, the original rectangle is 10 x 10, and after scaling it is displayed as 100 x 30.

If the scaling factor is 1, it means that the image is not scaled at all. If -1, the direction is flipped. ctx.scale(-1, 1) means horizontal flipping, and ctx.scale(1, -1) means vertical flipping.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.scale(1, -2);
ctx.font = "16px serif";
ctx.fillText("Hello world!", 20, -20);

The above code will display a horizontally inverted Hello World! with the height magnified by 2 times.

Note that negative scaling is essentially a coordinate flip, and the coordinate axis targeted is the coordinate axis of the origin in the upper left corner of the canvas.

(3) translate()

The CanvasRenderingContext2D.translate() method is used to translate the image. It accepts two parameters, the distance to move along the x-axis and the distance to move along the y-axis (in pixels).

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

(4) transform()

The CanvasRenderingContext2D.transform() method accepts six elements of a transformation matrix as parameters to complete deformations such as scaling, rotation, translation, and tilt.

Its usage format is as follows.

ctx.transform(a, b, c, d, e, f);
/*
a: horizontal scaling (default value 1, unit multiple)
b: horizontal tilt (default value 0, unit radian)
c: vertical tilt (default value 0, unit radian)
d: vertical scaling (default value 1, unit multiple)
e: horizontal displacement (default value 0, unit pixel)
f: vertical displacement (default value 0, unit pixel)
*/

Here is an example.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.transform(2, 0, 0, 1, 50, 50);
ctx.fillRect(0, 0, 100, 100);

In the above code, the original shape is a 100 x 100 rectangle, which is scaled to a 200 x 100 rectangle, and the upper left corner moves from (0, 0) to (50, 50).

Note that multiple transform() methods have cumulative effects.

(5) setTransform()

The CanvasRenderingContext2D.setTransform() method cancels the previous graphics transformation and restores the canvas to the state specified by this method. The parameters of this method are exactly the same as those of the transform() method.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

In the above code, the rectangle drawn by the first fillRect() method has its upper left corner translated from (0, 0) to (50, 50). The setTransform() method cancels this transformation (the graphics that have been drawn are not affected) and restores the canvas to its default state (transformation rectangle 1, 0, 0, 1, 0, 0), so the upper left corner of the second rectangle returns to (0, 0).

Methods of the canvas element

In addition to the methods provided by the CanvasRenderingContext2D object, the <canvas> element itself has its own methods.

htmlCanvasElement.toDataURL()

The toDataURL() method of the <canvas> element can convert Canvas data into an image in Data URI format.

canvas.toDataURL(type, quality);

The toDataURL() method accepts two parameters.

• type: string, indicating the format of the image. The default is image/png, another possible value is image/jpeg, and Chrome browser can also use image/webp.
• quality: A floating point number between 0 and 1, representing the quality factor of JPEG and WebP images. The default value is 0.92.

The return value of this method is a string in Data URI format.

function convertCanvasToImage(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  return image;
}

The above code converts the <canvas> element into a PNG Data URI.

var fullQuality = canvas.toDataURL("image/jpeg", 0.9);
var mediumQuality = canvas.toDataURL("image/jpeg", 0.6);
var lowQuality = canvas.toDataURL("image/jpeg", 0.3);

The above code converts the <canvas> element into three JPEG images: high quality, medium quality, and low quality.

htmlCanvasElement.toBlob()

The HTMLCanvasElement.toBlob() method is used to convert a <canvas> image into a Blob object. The default type is image/png. Its usage format is as follows.

// format canvas.toBlob(callback, mimeType, quality)

// Example canvas.toBlob(function (blob) {...}, 'image/jpeg', 0.95)

The toBlob() method can accept three parameters.

• callback: callback function. It accepts the resulting Blob object as a parameter.
• mimeType: string, the MIMEType type of the image, the default is image/png.
• quality: A floating point number between 0 and 1, indicating the quality of the image. It is only valid for images of type image/jpeg and image/webp.

Note that this method has no return value.

The following example copies a <canvas> image to an <img> image.

var canvas = document.getElementById('myCanvas');

function blobToImg(blob) {
  var newImg = document.createElement('img');
  var url = URL.createObjectURL(blob);

  newImg.onload = functio() {
    // After use, release the URL object URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
}

canvas.toBlob(blobToImg);

Canvas Use Cases

Animation effects

It is easy to create animation effects on a Canvas element by changing its coordinates.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var posX = 20;
var posY = 100;

setInterval(function() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  posX += 1;
  posY += 0.25;

  ctx.beginPath();
  ctx.fillStyle = "white";

  ctx.arc(posX, posY, 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}, 30);

The above code will produce a small dot that moves to the lower right every 30 milliseconds. At the beginning of the setInterval() function, the canvas is re-rendered with a black background in order to erase the small dots in the previous step.

Based on this example, various motion trajectories can be generated by setting the coordinates of the center of the circle. Below is an example of an up move followed by a down move.

var vx = 10;
var vy = -10;
var gravity = 1;

setInterval(function() {
  posX += vx;
  posY += vy;
  vy += gravity;
  // ...
});

In the above code, the x coordinate keeps increasing, indicating continuous movement to the right. The y coordinate first becomes smaller, and then, under the action of gravity, it continues to increase, indicating that it first rises and then falls.

Pixel Processing

Through the getImageData() and putImageData() methods, you can process each pixel and manipulate the image content, so you can rewrite the image.

The following is a general way of writing image processing.

if (canvas.width > 0 && canvas.height > 0) {
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}

In the above code, filter is a function that processes pixels. The following are some common filters.

(1) Grayscale effect

Grayscale is the arithmetic average of the red, green, and blue pixel values, which actually converts the image into black and white.

grayscale = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
  }
  return pixels;
};

In the above code, d[i] is the red value, d[i+1] is the green value, d[i+2] is the blue value, and d[i+3] is the alpha channel value. The algorithm for converting to grayscale is to add the red, green, and blue values, divide by 3, and then write the result back to the array.

(2) Retro effect

The sepia effect is to take a certain weighted average of the red, green and blue values ​​respectively, giving the image an old-fashioned effect.

sepia = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = r * 0.393 + g * 0.769 + b * 0.189; // red
    d[i + 1] = r * 0.349 + g * 0.686 + b * 0.168; // green
    d[i + 2] = r * 0.272 + g * 0.534 + b * 0.131; // blue
  }
  return pixels;
};

(3) Red mask effect

The red mask makes the image appear reddish. The algorithm is to set the red channel to the average of the red, green, and blue values, and set the green and blue channels to 0.

var red = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = (r + g + b) / 3; // Take the average value of the red channel d[i + 1] = d[i + 2] = 0; // Set both the green and blue channels to 0
  }
  return pixels;
};

(4) Brightness effect

Brightness effect refers to making an image brighter or darker. The algorithm adds a positive or negative value to the red channel, green channel, and blue channel at the same time.

var brightness = function(pixels, delta) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    d[i] += delta; // red
    d[i + 1] += delta; // green
    d[i + 2] += delta; // blue
  }
  return pixels;
};

(5) Reversal effect

The invert effect (invert) means that the image presents an effect of inverted colors. The algorithm is to take the opposite value of each of the red, green, and blue channels (255 - original value).

invert = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    d[i] = 255 - d[i];
    d[i + 1] = 255 - d[i + 1];
    d[i + 2] = 255 - d[i + 2];
  }
  return pixels;
};

The above is the detailed content of JS Canvas interface and animation effects. For more information about JS, please pay attention to other related articles on 123WORDPRESS.COM!