查看专栏目录
canvas示例教程100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
线条样式
canvas是线条样式主要表现为以下这几个方面
- lineWidth: 设置线条宽度。
- lineCap: 设置线条末端样式。
- lineJoin: 设定线条与线条间接合处的样式。
- miterLimit: 限制当两条线相交时交接处最大长度。
- setLineDash() 设置虚线、点划线等。
lineWidth
值必须为正数，默认值为 1。
let canvas = document.getElementById(‘dajianshi’);
let ctx = canvas.getContext(‘2d’)
ctx.moveTo(10, 10)
ctx.lineWidth = 10
ctx.lineTo(10, 80)
ctx.stroke()
lineCap
lineGap 有三个取值：butt、round、square，默认值为 butt.
中间的 lineGap 值为 round 左边的为 butt 右边的为 square。其中两条蓝色的两条线为辅助线，让三条垂直线条的区别更加明显。它们的区别主要体现在两个方面： + butt 和 square 的端点是直角拐点，round 的端点是一个圆弧 + 在起点、终点都在辅助线上的情况下，round 和 square 会在原来的起点和终点的基础上分别延伸半个线条宽度的距离，round 延伸的是直径为线宽的半圆，square 延伸的是一个宽为线宽高为线宽一半的矩形。
lineJoin
设置线段拐点处的样式。它有三个取值：round、bevel、miter（默认值）
根据 lineJoin 的不同取值绘制三条折线线段。如上图，最上面的路径 lineJoin 值为 round，中间的为 bevel，最下面的为 miter。红色的圆为辅助圆，直观的表现出 round 的连接点外侧为一个圆弧。
miterLimit
语法：
context.miterLimit=number;
正数。规定最大斜接长度。默认值为10
miterLimit 属性设置或返回最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 “bevel” 类型来显示（图解 3）
设置点划线。
ctx.setLineDash([])
如果数组内为空，则为一条直线；
如果数字内为奇数个，则循环，如[1,2,3] 模式将为[1,2,3,1,2,3,1,2,3…] 奇数位为线段宽度；偶数位为间隔的宽度。
如果数字内为偶数个，也是循环如[2,5]模式将为[2,5,2,5…]文章来源：https://www.toymoban.com/news/detail-824842.html
虚线绘制，涉及到 setLineDash 方法和 lineDashOffset 属性。setLinedash 接受一个数组用于设置虚线线段和间隙的宽度，lineDashOffset 用于设置相对于虚线初始位置的偏移量。
文章来源地址https://www.toymoban.com/news/detail-824842.html
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d');
function drawDash(){
ctx.setLineDash([4, 2])
ctx.lineDashOffset = 0
ctx.strokeRect(10, 10, 100, 40)
ctx.setLineDash([8, 4])
ctx.lineDashOffset = 0
ctx.strokeRect(10, 60, 100, 40)
}
drawDash()
canvas基本属性
| 属性 | 属性 | 属性 |
|---|---|---|
| canvas | fillStyle | filter |
| font | globalAlpha | globalCompositeOperation |
| height | lineCap | lineDashOffset |
| lineJoin | lineWidth | miterLimit |
| shadowBlur | shadowColor | shadowOffsetX |
| shadowOffsetY | strokeStyle | textAlign |
| textBaseline | width |
canvas基础方法
| 方法 | 方法 | 方法 |
|---|---|---|
| arc() | arcTo() | addColorStop() |
| beginPath() | bezierCurveTo() | clearRect() |
| clip() | close() | closePath() |
| createImageData() | createLinearGradient() | createPattern() |
| createRadialGradient() | drawFocusIfNeeded() | drawImage() |
| ellipse() | fill() | fillRect() |
| fillText() | getImageData() | getLineDash() |
| isPointInPath() | isPointInStroke() | lineTo() |
| measureText() | moveTo() | putImageData() |
| quadraticCurveTo() | rect() | restore() |
| rotate() | save() | scale() |
| setLineDash() | setTransform() | stroke() |
| strokeRect() | strokeText() | transform() |
| translate() |
到了这里，关于canvas设置线条样式（宽度，端点形态、拐点样式、虚线）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
