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

This article mainly introduces "how to draw a simple rectangular triangle with html5". In daily operation, I believe many people have doubts about how to draw a simple rectangular triangle with html5. The editor consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for everyone to answer the question of "how to draw a simple rectangular triangle with html5". Next, please follow the editor to study!

First place a canvas element in the html page, where the canvas element should have three attributes: ID, width, and height.

Copy the code

The code is as follows:

Gets the canvas object and the context var cxt=document.getElementById ('demo'). GetContext ("2d"); where the parameter 2d is determined.

To start drawing, there are two forms, one is fill and the other is stroke.

Javascript Code:

Copy the code

The code is as follows:

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

Cxt.beginPath ()

Cxt.fillStyle= "# F00"; / * set fill color * /

Cxt.fillRect (0J0200100); / * draw a rectangle, the first two parameters determine the starting position, and the last two are the width and height of the rectangle * /

Cxt.beginPath ()

Cxt.strokeStyle= "# 000"; / * set border * /

Width of the cxt.lineWidth=3;/* border * /

Cxt.strokeRect (0120200100)

Cxt.beginPath ()

Cxt.moveTo (0350)

Cxt.lineTo (100250)

Cxt.lineTo (200300)

Cxt.closePath (); / * optional step to close the drawn path * /

Cxt.stroke ()

At this point, the study of "how to draw a simple rectangular triangle with html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.