1

src/toCanvas.ts

@@ -46,8 +46,8 @@ interface INodeData {
 	'borderColor'?,
 	'borderWidth'?,
 
-	maskBegin?:boolean,
-	maskEnd?:boolean,
+	maskBegin?: boolean,
+	maskEnd?: boolean,
 }
 
 export interface RenderOptions {
@@ -64,10 +64,10 @@ export interface RenderOptions {
  * @return Promise<HTMLCanvasElement | string>
  */
 export async function toCanvas(data: ICData, options: RenderOptions = {}, callback?: (canvas: HTMLCanvasElement) => void): Promise<HTMLCanvasElement | string> {
-	const {type: exportType = 'png', quality = 0.7} = options
-	let {scale = window['devicePixelRatio'] || 1} = options
+	const { type: exportType = 'png', quality = 0.7 } = options
+	let { scale = window['devicePixelRatio'] || 1 } = options
 
-	let {nodes, width, height} = data
+	let { nodes, width, height } = data
 	width *= scale
 	height *= scale
 
@@ -119,10 +119,10 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 	})
 	if (p.length) await Promise.all(p)
 	nodes.forEach((n) => {
-		if(n.maskBegin){
+		if (n.maskBegin) {
 			ctx.save();
 			ctx.globalAlpha = 0;
-			drawBackgroundColor(n,ctx,scale)
+			drawBackgroundColor(n, ctx, scale)
 			ctx.globalAlpha = 1;//可能不需要
 			ctx.clip()
 		}
@@ -144,7 +144,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 				break
 		}
 
-		if(n.maskEnd){
+		if (n.maskEnd) {
 			ctx.restore();
 		}
 	})
@@ -168,7 +168,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
  * @param scale
  */
 function drawImage(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
-	let {x, y, img, width, height, borderRadius: borderRadiusTxt} = data
+	let { x, y, img, width, height, borderRadius: borderRadiusTxt } = data
 	x *= scale
 	y *= scale
 	width *= scale
@@ -216,7 +216,7 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D, scale: number)
 
 	ctx.font = font
 	ctx.textBaseline = "bottom"
-	ctx.fillStyle = color||"black"
+	ctx.fillStyle = color || "black"
 	var textMetrics = ctx.measureText(text)
 	let widthAll = textMetrics.width
 
@@ -279,7 +279,13 @@ function drawBackgroundColor(data: INodeData, ctx: CanvasRenderingContext2D, sca
 		borderRadiusPath(data, ctx, scale)
 		ctx.fill()
 	} else {
-		ctx.fillRect(x, y, width, height)
+		// ctx.fillRect(x, y, width, height)
+		ctx.moveTo(x, y)
+		ctx.lineTo(x + width, y)
+		ctx.lineTo(x + width, y + height)
+		ctx.lineTo(x, y + height)
+		ctx.lineTo(x, y)
+		ctx.fill()
 	}
 }