h5画三角形_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()如果当前的绘制路径是打开的，则闭合该绘制路径。

示例：

canvas-绘制三角形

浏览器不支持canvas

window.οnlοad=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();

}

效果图：

利用html5的canvas画布，即可实现三角形绘制的重点:

三角形在画布中的三个坐标：moveTo(10,10)----左上角坐标，ctx.lineTo(110,10)-----右上角 坐标， ctx.lineTo(60,50)----下面坐标