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);
}