How to use canvas to draw triangles in html5

This article mainly introduces the relevant knowledge of "how to use canvas to draw triangles in html5". The editor shows you the operation process through actual cases. The method of operation is simple and fast, and it is practical. I hope this article "how to use canvas to draw triangles in html5" can help you solve the problem.

Copy the code

The code is as follows:

Var canvas=document.getElementById ("canvas")

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

Cxt.beginPath ()

Cxt.moveTo (250 and 50)

Cxt.lineTo (200200)

Cxt.lineTo (300300)

Cxt.closePath (); / / filling or closing requires closing the path before drawing

/ / Hollow triangle

Cxt.strokeStyle= "red"

Cxt.stroke ()

/ / solid triangle

Cxt.beginPath ()

Cxt.moveTo (350 and 50)

Cxt.lineTo (300200)

Cxt.lineTo (400300)

Cxt.closePath ()

Cxt.fill ()

This is the end of the introduction on "how to draw triangles with canvas in html5". Thank you for your 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.