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

This article mainly introduces the use of Canvas in HTML5, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

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.

Thank you for reading this article carefully. I hope the article "what is the use of Canvas in HTML5" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.