博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
canvas绘图详解-05-线条的属性
阅读量:6771 次
发布时间:2019-06-26

本文共 713 字,大约阅读时间需要 2 分钟。

//线条宽度lineWidth = 10;//线条两端帽子的样式lineCap = "butt"(defualt)                "round"      //圆形          "square"    //方形//线条相接的样式lineJoin = "miter"(defualt) //尖角           "bevel"  //斜接           "round" //圆角//最大斜接长度miterLimit = 5

以上是线条的四个属性

1、lineWidth详解

先填充后描边,描边的宽度才是对的,如果先描边后填充,描边的宽度会有所减少

2、lineCap详解

解决方法①用closePath()来封闭路径

           ②用lineCap = "square" 

3、lineJoin详解

 

当设置了miter属性时,(默认miterLimit=10)如果线条 斜面长度超过了10,就按照bevel形式显示

 

4、miterLimit详解

默认值为10

miterLimit 斜接长度指的是在两条线交汇处内角和外角之间的距离。

只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效。

边角的角度越小,斜接长度就会越大。

为了避免斜接长度过长,我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示(图解 3):

 

上面是w3c里的,下面是课程里的

到底哪个是对的,有待考证!

 

转载于:https://www.cnblogs.com/wufangfang/p/6373847.html

你可能感兴趣的文章
webpack中的css引入文件需要用~@的形式,为什么?
查看>>
[译] React fiber如何以及为何使用列表来遍历组件树
查看>>
Dubbo 源码分析 - 集群容错之 LoadBalance
查看>>
Android AOP之字节码插桩
查看>>
九种方法解决前端跨域
查看>>
前端面试系列-ES6
查看>>
阿里开源分布式事务解决方案 Fescar 全解析
查看>>
D2 日报 2019年1月4日
查看>>
iOS数据结构与算法实战 二叉树总结篇
查看>>
2019年吐血推荐的Chrome扩展
查看>>
说说在 Python 中如何传递任意数量的实参
查看>>
Framework在iOS中地运用以及配置
查看>>
React 性能优化总结
查看>>
HashMap到底是怎么put的?
查看>>
【解决】Xcode9断点无法停在代码区
查看>>
深入V8引擎-默认Platform之mac篇(2)
查看>>
深入理解ThreadLocal
查看>>
深圳APP开发婚恋社交App
查看>>
ES6 -- String 扩展方法解析
查看>>
算力大战是BCH最坏的一种处理方式
查看>>