Canvas_绘制三角形

绘制三角形如下，三角形起点出不能闭合，

<!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; //边宽10ctx.fillStyle="blue"; //填充蓝色ctx.stroke(); //描边ctx.fill();//填充</script>
</body>
</html>