用线条绘制图形
<head>
<meta charset="UTF-8">
<title>线条绘制图形</title>
<style>
*{
margin: 0;
padding: 0;
}
#cvs {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="cvs" height="500" width="600"></canvas>
</body>
<script>
//获取画布。 相当于拿到了绘画的一张纸
var cas = document.getElementById('cvs');
//有了纸后,还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
var pencil = cas.getContext('2d');
//开始绘画
pencil.beginPath();
//设置起始点的位置
pencil.moveTo(60,80);
//绘制线条
pencil.lineTo(200,80);
pencil.lineTo(300,180);
pencil.lineTo(60,180);
//将线条闭合 如果不用此方法,线条是非闭合的, 注释掉可以看到效果
pencil.closePath();
//设置线条描边的样式
pencil.lineWidth='5';
pencil.strokeStyle='pink';
pencil.stroke();
//设置图形填充颜色
pencil.fillStyle='yellow';
pencil.fill();
//具体样式可以看官方API
</script>