Canvas教程(6)(2)_H5之家 - 中国HTML5教程资源分享第一站

miterLimit

会发现，这个miterLimit规定了一个自动填充连接点的极限值。如果超过了这个值，会导致lineJoin属性失效，会从 miter 变成 bevel。可以看出来，这个值和线宽以及夹角有关，具体是啥关系。看下图。

miterLimit

可以看到，关系有点复杂。有兴趣的小伙伴可以推导一下这个值与线宽、夹角的函数关系。其实，大多时候用不到这个隐藏属性，即便用到了也是凭感觉写个数然后不满意再调试即可。

高级线段绘制举例

实际在画布上绘制线段时，会有一些奇怪的现象发生，这里融合本节课学到的两个线段的属性讲解一个。

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>miterLimit</title> </head> <body> <div> <canvas> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); // 实例1: 圆形端点,斜角连接,在画布左上角 context.beginPath(); context.moveTo(0,0); context.lineTo(180,0); context.lineTo(180,180); context.lineJoin = 'bevel'; context.lineCap = 'round'; context.lineWidth = 10; context.strokeStyle = "red"; context.stroke(); // 实例2: 圆形端点,斜角连接,不在画布左上角 context.beginPath(); context.moveTo(300,200); context.lineTo(480,200); context.lineTo(480,380); context.lineJoin = 'bevel'; context.lineCap = 'round'; context.lineWidth = 10; context.strokeStyle = "blue"; context.stroke(); // 实例3: 平直端点,圆形连接,不在画布左上角 context.beginPath(); context.moveTo(600,400); context.lineTo(780,400); context.lineTo(780,580); context.lineJoin = 'round'; context.lineCap = 'butt'; context.lineWidth = 10; context.strokeStyle = "black"; context.stroke(); } </script> </body> </html>

演示 6-4

运行结果：

高级线段绘制举例

这 3 个线段和连接的实例有助于说明在画布上绘制线段时不同属性的组合。

实例 1 尝试从画布左上角开始绘制，结果发生了一个奇怪的现象。Canvas 路径在 x 轴和 y 轴方向上都绘制到了起点的外侧。由于这个原因实例 1 上面的线看起来要细些。另外，左上角水平部分中圆形端点也无法看到，它们都被绘制到了屏幕之外的负值坐标区域。此外，lineJoin 定义的对角线斜角也没有绘出。

实例 2 调整了例子 1 中出现的问题,将起始点离开左上角。这样就绘制出了完整的水平线,并且圆形 lineCap 和斜角 lineJoin 都被绘制出来了。

实例 3 显示了去掉 lineCap 设置后的默认端点效果,并且将 lineJoin 调整为圆角。

至此，线条的所有内容我们已经说完了。这个看起来很简单的一个线条，原来还有这么多内容！艺术家可不是那么好当的，不过想必也激发了童鞋们的求知欲。Canvas究竟有多少内容等待着我们去发现？这是一个开始，让我们继续前行！

如果您喜欢本书，请使用支付宝扫描下面的二维码捐助作者。

二维码

谢谢您的支持！也欢迎您订阅本书。

如果书中有疏漏或错误之处，敬请您指出，期待您的pull request。如果有任何疑问也可以发送issue。

本人邮箱：airing@ursb.me

本人博客：

本书地址：

本书github：

Canvas--Draw on the Web