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

This article mainly introduces "how to use Canvas tags in HTML5" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, I hope that this "how to use Canvas tags in HTML5" article can help you solve the problem.

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

Execute it.

This is the end of the introduction on "how to use Canvas tags in HTML5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.