Shulou(Shulou.com)06/01 Report--

This article will explain in detail the examples of the use of Canvas in HTML5. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

MoveTo (xPowery) defines the line start coordinates

LineTo (xPowery) defines the line end coordinates

Use the stroke () method to draw lines

Use the beginPath () method to clear the path that exists in the current canvas and prepare to start drawing a new path

Call the arc () method, passing in the corresponding parameters

Use the stroke () method to draw lines

Your browser does not support HTML5 Canvas tags

Var c=document.getElementById ("myCanvas")

Var cxt=c.getContext ("2d")

Cxt.fillStyle= "# FF0000"

Cxt.beginPath ()

Cxt.arc (80, 28, 28, 25, 0, and 0, Math.PItem2, true)

Cxt.closePath ()

Cxt.fill ()

Execute it.

CreateLinearGradient (x1)-create a line gradient

CreateRadialGradient (x _ journal y _ r _ 1 ~ r _ 1)-create a radial / circular gradient.

Create a gradient object (linear or radial)

Use two or more stop colors to achieve a color gradient effect: the addColorStop () method specifies the color to stop, and the parameters are described in coordinates, which can be 0 to 1.

Apply a gradient to a canvas element, set the fillStyle or strokeStyle value of the canvas context object to a gradient, and then draw a shape, such as a rectangle, text, or a line

Your browser does not support HTML5 Canvas tags

Var c=document.getElementById ("myCanvas")

Var ctx=c.getContext ("2d")

/ / create a gradient

Var grd=ctx.createLinearGradient (0rec 0je 200jue 0); / / Linear

/ / var grd=ctx.createRadialGradient (75, 50, 50, 5, 90, 60, 100); / / Radial

Grd.addColorStop (0, "blue")

Grd.addColorStop (1, "white")

/ / fill gradient

Ctx.fillStyle=grd

Ctx.fillRect (10, 10, 150, 150, 80)

Execute it.

Get or create the dom object of the image

Using drawImage method to realize Image rendering

Your browser does not support HTML5 Canvas tags

Var c=document.getElementById ("myCanvas")

Var ctx=c.getContext ("2d")

/ / create the dom object of the image, the first method

Var img=new Image ()

Img.src= "/ static/resource/img/logo.png"

/ / create the dom object of the picture, the second method

/ / var img=document.getElementById ("img")

Ctx.drawImage (img,0,0)

Execute it.

Use the font property to define fonts

Use fillText (text,x,y) to draw solid text on canvas

Use strokeText (text,x,y) to draw hollow text on canvas

Your browser does not support HTML5 Canvas tags

Var c=document.getElementById ("myCanvas")

Var ctx=c.getContext ("2d")

Ctx.font= "30px Microsoft Yahei"

Ctx.fillText ("Hello World", 10jue 50); / / draw solid text

/ / ctx.strokeText ("Hello World", 10pm 50); / / draw hollow text

This is the end of the article on "examples of the use of Canvas in HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.