canvas设置线条样式（宽度，端点形态、拐点样式、虚线）

在这里插入图片描述

查看专栏目录

canvas示例教程100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。

文章目录

- 线条样式
- - lineWidth
  - lineCap
  - lineJoin
  - miterLimit
  - 设置点划线。
- canvas基本属性
- 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…]

虚线绘制，涉及到 setLineDash 方法和 lineDashOffset 属性。setLinedash 接受一个数组用于设置虚线线段和间隙的宽度，lineDashOffset 用于设置相对于虚线初始位置的偏移量。
在这里插入图片描述

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()