Canvas使用fill()填充绘画三角形以及使用closepath()解决缺角问题
Canvas使用fill()填充绘画三角形以及使用closepath()解决缺角问题
Devops海洋的渔夫
发布于 2019-12-26 17:43:19
发布于 2019-12-26 17:43:19
文章被收录于专栏：Devops专栏
路径的绘制的方法
- 描边 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(); // 结束路径，自动闭合浏览器展示如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
