HTML5怎么画三角形？

在很多网页中经常会有三角形角标作为导航指示器使用，那么不使用图片，如何制作三角形？下面本篇文章给大家介绍使用HTML5绘制三角形的方法，希望对大家有所帮助。

在HTML5中可以使用canvas画布来画三角形。使用HTML5 Canvas绘制三角形所需的CanvasRenderingContext2D对象的属性和方法如下：

属性或方法	基本描述
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个`CanvasGradient`对象或者`CanvasPattern`对象
lineWidth	定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineJoin	定义两条线交汇时的边角类型（miter 尖角默认 bevel斜角 round 圆角）
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。用于填充字体颜色、填充路径区域、图形区域。
beginPath()	开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。
moveTo(int x, int y)	定义一个新的绘制路径的起点坐标
lineTo(int x, int y)	定义一个绘制路径的中间点坐标
stroke(int x, int y)	沿着绘制路径的坐标点顺序绘制直线
fill()	填充当前的图像（路径）。默认颜色是黑色。
closePath()	如果当前的绘制路径是打开的，则闭合该绘制路径。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas-绘制三角形</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
    浏览器不支持canvas
</canvas>
<script>
        window.onload=function () {

            var canvas=document.getElementById("canvas");//获取canvas对象

            var ctx=canvas.getContext("2d"); //创建二维的绘图上下文对象

            ctx.beginPath();
            ctx.linewidth=20;
            ctx.lineJoin="round"; //两条线交汇时的边角类型（miter 尖角默认  bevel斜角 round 圆角 ）
            ctx.moveTo(10,10);
            ctx.lineTo(110,10);
            ctx.lineTo(60,50);
            ctx.closePath(); //closePath() 关闭路径  闭合
            ctx.strokeStyle="blue";// strokeStyle 只能填充该路径的颜色
            ctx.fillStyle="red";// fillStyle 填充字体颜色、填充路径区域、图形区域
            ctx.fill();// 填充
            ctx.stroke();
        }
    </script>
	</body>
</html>

效果图：