Canvas knowledge point, canvas

Canvas knowledge point, canvas

HTML5 <canvas> elements are used to draw images, which are completed by scripts (usually JavaScript.
<Canvas> labels are only graphical containers. You must use scripts to draw images.
You can use Canva to draw paths, boxes, circles, characters, and add images in multiple ways.

Create a Canvas)
A canvas is a rectangle in a webpage and is drawn using the <canvas> element.
Note: by default, the <canvas> element has no borders or content.
<Canvas id = "myCanvas" width = "200" height = "100"> </canvas>
Note: The label usually needs to specify the size of the canvas defined by the id attribute (often referenced in the script), width and height attribute.
Tip: You can use multiple <canvas> elements on the HTML page.

Use the style attribute to add borders:
<Canvas id = "myCanvas" width = "200" height = "100"
Style = "border: 1px solid #000000;">
</Canvas>

Use JavaScript to draw images
The canvas element itself has no plotting capability. All the painting work must be completed inside JavaScript:
First, find the <canvas> element:
Var c = document. getElementById ("myCanvas ");
Then, create the context object:
Var ctx = c. getContext ("2d ");
The getContext ("2d") object is a built-in HTML5 object. It has multiple ways to draw paths, rectangles, circles, characters, and add images.
The following two lines of code draw a red rectangle:
Ctx. fillStyle = "# FF0000 ";
Ctx. fillRect );
Set the fillStyle attribute to CSS color, gradient, or pattern. FillStyle is set to #000000 (black) by default ).
The fillRect (x, y, width, height) method defines the current filling mode of the rectangle. The usage of strokeStyle is the same as that of fillStyle, but the difference is that it is used for stroke.
Canvas coordinates
Canvas is a two-dimensional mesh.
The coordinates in the upper left corner of the canvas are (0, 0)
The above fillRect method has parameters (, 75 ).
Draw a 150x75 rectangle on the canvas, starting from the upper left corner (0, 0 ).
Canvas-Path
Draw a line on the Canvas using either of the following methods:
MoveTo (x, y) defines the start coordinate of a line
LineTo (x, y) defines the coordinate of the end of a line
To draw a line, we must use the "ink" method, just like stroke ().
Var c = document. getElementById ("myCanvas ");
Var ctx = c. getContext ("2d ");
Ctx. moveTo (0, 0 );
Ctx. lineTo (200,100 );
Ctx. stroke ();
To draw a circle in the canvas, we will use the following method:
Arc (x, y, r, start, stop, false)
In fact, we use the "ink" method when drawing a circle, such as stroke () or fill ().
Var c = document. getElementById ("myCanvas ");
Var ctx = c. getContext ("2d ");
Ctx. beginPath ();
Ctx. arc (, 2 * Math. PI, false); // false indicates clockwise painting. true indicates clockwise painting.
Ctx. stroke ();
Canvas-Text
Use canvas to draw text. The important attributes and methods are as follows:
Font-define font
FillText (text, x, y)-draw solid text on the canvas
StrokeText (text, x, y)-draw hollow text on the canvas
Var c = document. getElementById ("myCanvas ");
Var ctx = c. getContext ("2d ");
Ctx. font = "30px Arial ";
Ctx. fillText ("Hello World", 10, 50 );

Cainiao tutorial Network