Canvas basics and canvas Basics
Canvas is an HTML element designed for vector graphics on the client side. It does not act on its own, but presents a drawing API to the client JavaScript so that the script can draw everything you want to draw on a canvas.
Basic html Structure
<!DOCTYPE html>---------------------------- Separation line ------------------------------------------
Part 1: Basic Concepts
1. Create a canvas
<Canvas id = "myCanvas" width = "800" height = "800"> </canvas>
Note: ① width and height define the width and height of the canvas Element and define the size of the 2D rendering context accordingly.
② 2D rendering context size default value: 300 pixels in width, 150 pixels in height
2. Coordinates
The upper left corner is the origin (0, 0)
Shift right: x coordinates increase
Move down: y coordinates increase
3. 2D rendering context (where the image is actually drawn)<Script type = "text/javascript"> var canvas = document. getElementById ('mycanvas '); // obtain the canvas ID var context = canvas. getContext ("2d"); </script>Part 2: rectangle
1. Draw a rectangle
Method: context. fillRect (x, y, width, height );
2. Draw a stroke rectangle
Method: strokeRect (x, y, width, height)
Instance:<Script> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. fillRect (100,100,); // draw a rectangle. The default color is black context. strokeRect (120, 0,100,100); // draw stroke rectangle} draw1 ('mycanvas '); </script>Part 3: Line
Steps for drawing a line (PATH:
1) beginPath () Preparation
2) moveTo () plot the origin coordinates of the path (x, y)
3) lineTo () sets the coordinate of the end point of a line (x, y)
4) closePath () draws the path
5) Draw the outline of stroke () and display the path
Instance:<script> function draw1(id){ var canvas = document.getElementById(id); var context =canvas.getContext("2d"); context.beginPath(); context.moveTo(40,40); context.lineTo(140,40); context.closePath(); context.stroke(); }draw1('myCanvas');</script>Part 4: Circle
Canvas draws a circle by drawing an arc and connecting it to the beginning and end.
Method for creating an arc: context. arc (x, y, radius, starAngle, endAngle, anticlockwise)
Corresponding parameters:
1) The (x, y) coordinate value of the arc origin, that is, the center of the circle in the example
2) Arc Radius
3) Start Angle
4) end angle
5) Boolean value (clockwise false, clockwise true)
Note: The Circle in the canvas is in radians rather than degrees.
360 degrees (a complete circle) is 2 π (2 times of PI) radians
Instance:<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. beginPath (); context. arc (230,90, 50,0, Math. PI * 2, false); // draw a circular context. closePath (); context. fill (); // fill path} draw1 ('mycanvas '); </script>
Part 5: Style
1. fillStyle: Fill the rectangle with color
2. strokeStyle: add color to stroke and line
3. lineWidth: Modify the line width (the default line width is 1). This attribute also affects the image.By setting the fillStyle attribute of the 2D rendering context, you can modify the fill color of the shape and path, as shown below, to draw a Red Square
<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. fillStyle = "red"; // fill the red context with the image. fillRect (0, 0, 50, 50); // a Red Square context. fillRect (70, 80, 80); // another Red Square context. fillStyle = "blue"; // fill the image with a blue context. fillRect (70, 80, 80); // a blue square context. strokeStyle = "yellow"; // fill the graph with a yellow stroke context. strokeRect (170,170,100,100); // a square context with a yellow stroke. strokeStyle = "blue"; // draw the blue Line context. beginPath (); // draw a line to start context. VPC: moveTo (290,290); context. lineTo (350,350); context. closePath (); context. stroke (); // draw a line to end the context. lineWidth = 5; // bold line context. strokeStyle = "blue"; // draw the blue Line context. beginPath (); context. VPC: moveTo (320,340); context. lineTo (370,390); context. closePath (); context. stroke (); // The bold line is used to draw the context. strokeRect (380,380, 50, 50) // affected image, stroke bold} draw1 ('mycanvas '); </script>
Part 6: Drawing text
Canvas:
① The text in the canvas is drawn as an image and cannot be selected using the mouse pointer like ordinary text
② Text cannot be edited after being drawn, unless the text is erased and re-drawn
Note: html is usually used to process text and canvas is used to process pixels and images.
1. Draw text: fillText
Parameters:
The text to be drawn, the (x, y) coordinate value of the text origin (lower left)
Default Value: 10px sans-serif
2. Modify text attributes: font
3. Stroke text: strokeText<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); var text = "hello world! "; Context. font = "30px serif" // set the text size to 30px context. fillText (text, 40, 40); // draw the text context. strokeText (text, 40, 80); // stroke text tower you} draw1 ('mycanvas '); </script>Part 7: erase canvas
① ClearRect ();
Parameter: Origin coordinate, width, and height<Script type = "text/javascript"> function draw1 (id) {var canvas = document. getElementById (id); var context = canvas. getContext ("2d"); context. beginPath (); // starts the context of the circle. arc (230,90, 50,0, Math. PI * 2, false); context. closePath (); context. fill (); // The end context of the circle. fillStyle = "blue"; context. fillRect (180,140,100,100); // The square plot completes context. clearRect (180,140,100,100); // erased from the origin (180,140) position, erased the 100X100 area (cleared the square above) context. clearRect (, 50); // The Arc origin is its center. To obtain the correct origin point required by the clearRect method, use x of the origin, y coordinate minus its radius (Partial Area of the circle is cleared)} draw1 ('mycanvas '); </script>
Part 8:
Fill the canvas with the browser window
Canvas ignores the percentage and interprets 100% as 100px. Therefore, you need to fill the canvas with a window, you only need to set the height and width of the canvas element to the height and width of the browser window (to avoid the problem that the scroll bar may occur when you adjust the size of the window at will, use the onresize method)<script type="text/javascript"> window.onresize = resizeCanvas; function resizeCanvas(){ var canvas = document.getElementById('myCanvas'); var context =canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; context.fillStyle="red"; context.fillRect(50,50,150,150); }; resizeCanvas();</script>
Adjust the window size without any scroll bars.
-----------------------------------------------------------------------
The above are notes made during study. If you have any questions, please correct them. Thank you very much ~
Reference: HTML5 Canvas basic tutorial
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
