<!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>
浏览器显示如下:
// 填充颜色
context.fill();
浏览器显示如下:
可以看到使用fill()
就可以填充颜色。下面再来看一个缺角的闭合问题。
/*描边*/
context.lineWidth = 20;
context.stroke();
浏览器显示如下:
出现这个的原因跟前面篇章中说到画线的中轴线位置是在刻度位置的问题一样。那么有没有办法解决这个缺角的问题呢?
context.closePath(); // 结束路径,自动闭合
浏览器展示如下: