路径的绘制的方法
- 描边 stroke()
- 填充 fill()
首先绘画三条直线拼接出一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');
context.moveTo(100,100); // 起点
context.lineTo(200,100); // 第一条线
context.lineTo(200,200); // 第二条线
context.lineTo(100,100); // 第三条线
/*描边*/
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
浏览器显示如下：
使用fill()填充颜色
// 填充颜色
context.fill();
浏览器显示如下：
可以看到使用fill()就可以填充颜色。下面再来看一个缺角的闭合问题。
设置每条直线的宽度20px进行描边，出现缺角现象
/*描边*/
context.lineWidth = 20;
context.stroke();
浏览器显示如下：
出现这个的原因跟前面篇章中说到画线的中轴线位置是在刻度位置的问题一样。那么有没有办法解决这个缺角的问题呢？
使用closepath()自动结束路径来绘画最后一条到起点的线，解决缺角的问题
context.closePath(); // 结束路径，自动闭合
浏览器展示如下：
