html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
发布时间：2020-09-22 21:55:46 所属栏目：MySql教程 来源：网络整理
导读：副标题#e# var cvs = document.getElementById('cvs'); //画布 var ctx = cvs.getContext('2d'); // 画笔 我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布
|
看到了吧，越粗的边线，他的角的圆弧越大。 如果我想Canvas里面的边线也和PS这种一样，有没有办法呢？当然有，就是lineJoin属性。 lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6： 毫无疑问我们一下就能明白我们的矩形用的是尖角，所以试着把他改成圆角看看： 图形变成了这样，图7： 有点像PS的了吧？ 另外，通过前面图我们了解到，Canvas的线条两端是平的，可不可以改呢？毕竟平的不好看。 也是可以的，即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8 看图就能发现，其实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。 你有没有想到什么？哈哈，前面的闭合路径的问题，如果我们把lineCap设为方头，效果也是一样的！ 但为了保险起见，我们还是要把路径闭合了，切记！ 我还要提醒一下：闭合的路径没有端点！所以闭合的路径上看不到端点的样式。 另外：lineCap与lineJoin有点相似，注意不要搞混。 如果你眼尖并且运气不好，你可能会发现有时候1像素的线条不是1像素宽，好像要宽一些，模糊一些。如图9： （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号