Canvas样式

Canvas样式

线条样式

ctx.lineWidth
设置线条宽度，设置当前绘线的粗细。属性值必须为正数。默认值是 1.0

ctx.lineWidth = 10

ctx.lineCap
设置线段端点样式，可选值为：butt，round 和 square。默认是 butt

	ctx.lineCap = 'butt'
    ctx.lineCap = 'round'
    ctx.lineCap = 'square'

lineJoin
该属性可以设置两线段连接处所显示的样子。可选值为：round, bevel 和 miter。默认是 miter

ctx.lineJoin = 'miter'

miterLimit
限制当两条线相交时交接处最大长度
所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度

ctx.miterLimit = 3

setLineDash/getLineDash
setLineDash 可以设置当前虚线样式
getLineDash 则是返回当前虚线设置的样式，长度为非负偶数的数组

ctx.setLineDash([5,10,40,30])
// 如果个数为奇数个 setLineDash会复制一份一样的数组拼接到一起变成偶数个 
// eg: [1,2,3] => [1,2,3,1,2,3]
//     [1,2] => [1,2]

lineDashOffset
设置虚线样式的起始偏移量

ctx.lineDashOffset = 5

透明度

globalAlpha
全局透明度

	ctx.globalAlpha = 0.5

样式透明度

	ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
    ctx.fillRect(10,10,300,100)

渐变

线性渐变

createLinearGradient(x1, y1, x2, y2)，参数分别为 起点的坐标和终点的坐标。

在渐变的设置中还需要一个方法来添加渐变的颜色，语法为：gradient.addColorStop(offset, color)，其中color就是颜色，offset 则是颜色的偏移值，只为0到1之间的数

	const gradient = ctx.createLinearGradient(10, 10, 400, 10)
    gradient.addColorStop(0, '#00FF00')
    gradient.addColorStop(1, '#0000FF')

径向渐变
径向渐变 语法：ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)，参数分别为开始圆的坐标和半径以及结束圆的坐标和半径。

	const gradient = ctx.createRadialGradient(100, 100, 100, 100, 100, 10)
    gradient.addColorStop(0, '#00FF00')
    gradient.addColorStop(1, '#0000FF')

图形样式

Canvas中想绘制图案效果，需要用 createPattern 方法来实现。

语法：createPattern(image, type)，

Image 参数可以是一个 Image 对象，也可以是一个 canvas 对象
Type 为图案绘制的类型，可用的类型分别有：repeat，repeat-x，repeat-y 和 no-repeat。

	const img = new Image()
	img.src = './test/webGIS/vite-cesium/src/assets/vue.svg'
	img.onload = ()=>{
		const gradient = ctx.createPattern(img, 'repeat')
		ctx.fillStyle = gradient;
		ctx.fillRect(10, 10, 400, 100);
	}

使用canvas绘制canvas

	const ctx = canvas.getContext('2d')
    const ctx2 = canvas2.getContext('2d')
    
	img.onload = () => {
		const gradient = ctx.createPattern(img, 'repeat')
		ctx.fillStyle = gradient;
		ctx.fillRect(10, 10, 400, 100);

		const gradient2 = ctx2.createPattern(canvas, 'repeat')
		ctx2.fillStyle = gradient2;
		ctx2.fillRect(10, 10, 400, 100);
 	}