绘制三角形如下,三角形起点出不能闭合,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制填充的三角形</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var myCanvas=document.getElementById("canvas");
ctx=myCanvas.getContext("2d");
ctx.beginPath(); //开启新路径,上边的画图与我无关
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,100);
ctx.lineWidth=10;
ctx.stroke();
</script>
</body>
</html>
要采用自动闭合的方式,closePath()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制填充的三角形</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var myCanvas=document.getElementById("canvas");
ctx=myCanvas.getContext("2d");
ctx.beginPath(); //开启新路径,上边的画图与我无关
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.closePath(); //自动闭合
ctx.lineWidth=10;
ctx.stroke();
</script>
</body>
</html>
说明:beginPath() 与 closePath() 没有任何关系。
绘制一个 边为10的蓝色三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制填充的三角形</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var myCanvas=document.getElementById("canvas");
ctx=myCanvas.getContext("2d");
ctx.beginPath(); //开启新路径,上边的画图与我无关
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.closePath(); //自动闭合
ctx.lineWidth=10; //边宽10
ctx.fillStyle="blue"; //填充蓝色
ctx.stroke(); //描边
ctx.fill();//填充
</script>
</body>
</html>