Convas canvas:
Canvas API (canvas) is a new tag in HTML5, which is used to generate images in real time on Web pages, and can operate image content. Basically, it is a bitmap that can be operated by JavaScript
<body>
<! -- Note: the width and height set on the tag is the original width and height Canvas API (canvas) is a new tag added in HTML5 for real-time image generation on the web page, and can operate the image content. Basically, it is a bitmap that can be operated with JavaScript (bitmap) -- >
<canvas id='mycan' width="300" height="300" style="border:1px solid black"></canvas>
</body> var can = document.getElementById("mycan");
// 1. Set the canvas type to 2d, which is required
var hb = can.getContext('2d');1. rectangle
// Draw rectangle
hb.fillStyle="red";//Color of rectangle content fill
hb.fillRect(0,0,150,75)//FillRect (a, B, c,d) -- > A, B represents x,y value in Mycon; c,d represents width and height
// Rectangle fill
hb.strokeStyle='blue';//Rectangle color
hb.lineWidth=3;//Thickness of rectangle
hb.strokeRect(50,50,100,100)//Position, width and height of rectangular box*/
2. circles
hb.arc(100,75,50,0,2*Math.PI);//Draw a circular path arc (a, B, c, d, e) -- > A, B is x,y value, c is radius, d is start angle, e is end angle
hb.stroke();//Fill a circle into the canvas
//Solid fill
hb.fillStyle="red";//Entity color
hb.fill();//Solid fill to canvas
//Wire frame
hb.strokeStyle='black';//Fill the path box with black
hb.lineWidth=3;//Set the thickness of the wireframe
hb.stroke();//Wireframe fill to canvas*/
3. painting path
hb.beginPath();//Start path means line drawing
hb.moveTo(100, 100);//Set the first coordinate (x,y) of the starting path
hb.lineTo(200, 100);//Set the end coordinate of line drawing
hb.strokeStyle = 'red';
hb.lineWidth = 4;
hb.lineJoin = 'bevel';//Set corner type bevel -- bevel; round -- fillet meter -- default to create sharp corner
hb.lineTo(200, 100);//
hb.lineTo(200, 200);
hb.lineTo(100, 200);//Set the end coordinate of line drawing
hb.lineTo(100, 100);//Set the end coordinate of line drawing
hb.closePath();
hb.stroke();//Fill path to canvas
hb.fillStyle = 'pink';//Set solid color
hb.fill()//Fill entity to canvas4. Font setting
// Entity font
hb.font='bold italic 40px Arial';//Set font
hb.fillStyle='red';//Set font color
hb.fillText('Front-end development',0,40);//Set string, coordinate point of string placement// (virtual) line font
hb.strokeStyle='blue';
hb.lineWidth=3;
hb.strokeText('Front-end development',0,40)Manual URL: http://www.w3school.com.cn/tags/canvas_arc.asp