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>

效果图:

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

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

以上就是HTML5怎么画三角形?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读