How to use html5 to draw arcs and rotated graphics

This article mainly introduces how to use html5 to draw arcs and rotating graphics, which is very detailed and has a certain reference value. Interested friends must finish reading it!

First of all, know the coordinates of the circle:

The code is as follows:

Var cxt=document.getElementById ('demo'). GetContext ("2d")

Cxt.beginPath ()

Cxt.arc / * draw a semicircle with center coordinates 100100; the start Radian is 0.75 and the end Radian is 1.75; the last parameter False = clockwise, true = counterclockwise, of course, this parameter is optional * /

Cxt.fillStyle= "# F00"; / * choose the color to use * /

Cxt.fill (); / * the step of actually drawing a figure on the canvas, drawing the first semicircle * /

/ * draw the second semicircle in the same way * /

Cxt.beginPath ()

Cxt.arc (170pje 100pr 50gm. PIQR 1.25ct Math.PIQR 0.25pr false)

Cxt.fillStyle= "# F00"

Cxt.fill (); / * draw the drawing on the canvas * /

Cxt.beginPath ()

/ * rotate the canvas 45 degrees clockwise, and the parameter of the rotate function is radians, so convert it * /

Cxt.rotate (45*Math.PI/180)

Cxt.fillRect (141.1 fuzz 50100100); / * the start coordinate is 141.1 meme 50, and the width and height are both 100cm /

Cxt.fillStyle= "# F00"

Cxt.fill ()

Cxt.beginPath ()

/ * rotate the canvas to a normal angle * /

Cxt.rotate (- 45*Math.PI/180)

Cxt.font= "60px Microsoft Yahei"

Cxt.strokeStyle= "# f00"

Cxt.strokeText ("I love html5", 0300); / * two parameters, the first is the x-axis coordinate to start drawing the text, and the second is the Y coordinate to start drawing the text * /

Cxt.stroke ()

/ * create a gradient * /

Var grd=cxt.createLinearGradient / * the four parameters are the start point of the gradient x, the end point of the gradient x, and the end point of the gradient x, y

Grd.addColorStop (0, "# FF0000")

Grd.addColorStop (0.25, "# FFFF00")

Grd.addColorStop (0.5, "# 00FF00")

Grd.addColorStop (.75, "# 00FFFF")

Grd.addColorStop (1, "# FFFF00")

Cxt.strokeStyle=grd

Cxt.strokeText ("I love canvas", 0400); / * two parameters, the first is the x-axis coordinate to start drawing the text, and the second is the Y coordinate to start drawing the text * /

Cxt.stroke ()

The above is all the contents of the article "how to draw arcs and rotated graphics with html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!