HTML5 New Element Canvas-Realize Tai Chi Bagua Diagrams and Fans

HTML5 new element Canvas-Realize Taiji Bagua diagram and fan
Drawing process:
1. Add canvas element in HTML5, and set width and ID
2. Add prompt sentence in canvas element, so that browsers that do not support canvas can display Friendly prompt sentence
3. Add script element
4. Get canvas/set drawing environment
(1) Set line width: lineWidth (camel case nomenclature) = value
(2) Set color: strokeStyle=color value (only applicable to outline, line segment, For filling color: fillStyle=color)
(3) Set the starting point: moveTo (x coordinate, y coordinate)
(4) Set the end point: lineTo (x coordinate, y coordinate)
(5) Start drawing: stroke()

At the end of the article, there is a case where Canvas implements Tai Chi Bagua diagrams and fans.

1. What is Canvas?
The canvas element of HTML5 uses JavaScript to draw images on web pages.
The canvas is a rectangular area, you can control every pixel of it. Canvas has a variety of methods for drawing paths, rectangles, circles, characters, and adding images.
2. Create a Canvas element
Add a canvas element to the HTML5 page and specify the id, width and height of the element:

<canvas id="myCanvas" width="200" height="100"></canvas>

Draw by JavaScript

• The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript uses id to find the canvas element:

var c=document.getElementById("myCanvas");

Then, create the context object:

var cxt=c.getContext("2d"); 

The getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.
The following two lines of code draw a red rectangle:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 

The fillStyle method dyes it red, and the fillRect method specifies the shape, position, and size.
Understanding coordinates
The fillRect method above has parameters (0,0,150,75).

Meaning: draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).

As shown in the figure below, the X and Y coordinates of the canvas are used to position the painting on the canvas.

Case: The
HTML code is as follows:

 <canvas id="canvas" width="500" height="500">
        您的浏览器暂不支持HTML的元素
        c.lineTo(200,200);

    </canvas>

The CSS code is as follows:

<style>
       canvas {
    
    
           background: #a9a9a0 ;
       }
    </style>

The JS code is as follows:

<script>
        var canvas=document.getElementById('canvas');
        var c=canvas.getContext('2d');
        c.lineWidth=50;
        c.strokeStyle="aaaaaa";
        c.moveTo(50,50);
        c.lineTo(200,200);
        c.lineTo(300,300);
        c.lineTo(50,50);
        c.stroke();

    </script>

The rendering is as follows (a bit ugly, don't spray me): The

code is as follows:

  <canvas id="canvas" width="800" height="700">
        您的浏览器暂不支持HTML的元素
        c.lineTo(200,200);
   </canvas>

<style>
       canvas {
    
    
           background: #a9a9a0 ;
       }
    </style>

  <script>
       var canvas=document.getElementById('canvas');
        var c=canvas.getContext('2d');
        c.lineWidth=10;
        c.strokeStyle="a52a2a";
        c.lineWidth=6;
c.strokeStyle="#ffa500";
c.fillStyle="#ffa500";
c.moveTo(400,500);
c.arc(400,500,300,Math.Pi*7/6,Math.PI*1.5,false);
c.beginPath();
c.moveTo(400,500);
c.arc(400,500,300,Math.PI*11/6,Math.PI*7/6,true);
c.fill();

c.beginPath();
c.fillStyle="#a9a9a0";
c.arc(400,500,150,Math.PI*7/6,Math.PI*1.5,false);
c.beginPath();
c.moveTo(400,500);
c.arc(400,500,150,Math.PI*11/6,Math.PI*7/6,true);
c.fill();
c.beginPath();
c.fillStyle="#000000";
c.font="55px 楷体";
c.fillText("纵",375,275);
c.fillText("横",375,340);

The effect of Tai Chi Bagua is as follows: