HTML5-canvas-basics, html5canvas

HTML5-canvas-basics, html5canvas

<Canvas> New Elements

<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.

 

Note:By default, the <canvas> element has no borders or content.

　　Painter

<! -- FillStyle is a fill style. If the fillStyle attribute is not set, the default fill color is black, and fillRect is a rectangle. The parameter is X, Y, Width, and Height. --> <! DOCTYPE html> // Ctx. moveTo (0, 0); // defines the start Coordinate
// Ctx. lineTo (100,100); // defines the end Coordinate
// Ctx. stroke (); // draw a line

            })        </script>    
Running result:

　　Circle
<! -- Arc circle, the parameter is X, Y, radius, start angle, end angle, clockwise/counterclockwise (optional) XY refers to the distance of the dot --> <! DOCTYPE html> // Ctx. fillText ("Hello World", 10, 50); // draw a solid font
// Ctx. strokeText ("Hello World",); // draw a hollow font
}) </Script> <style type = "text/css"> canvas {border: 1px solid #000 ;} </style> 
Running result:

　Gradient
CreateLinearGradient (X, y, x1, y1)-Create a line gradient
CreateRadialGradient (X, y, r, x1, y1, r1)-Create a radial/circular gradient
// Create a gradient var grd = ctx. createLinearGradient (, 0); grd. addColorStop (0, "red"); grd. addColorStop (1, "blue"); // fill in the gradient ctx. fillStyle = grd; ctx. fillRect (, 80 );
Running result:

　Radial/circular gradient
Var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // create a gradient var grd = ctx. createRadialGradient (60,100,); grd. addColorStop (0, "red"); grd. addColorStop (1, "white"); // fill the gradient ctx. fillStyle = grd; ctx. fillRect (, 80 );
Running result:

Image
<! DOCTYPE html> 
Running result:
(Canvas image on the right)