文本的属性：
字体：font
ctx.font = "bold 100px serif"
ctx.fillText("测试font",50,300);
水平对齐：textAlign=start\left\end\right\center
<!-- dir 文字方向 rtl 右边到左 ltr 左到右 -->
<!-- <html lang="en" dir="rtl"> -->
ctx.strokeStyle = "#999";
ctx.setLineDash([8]);
ctx.moveTo(300,50);
ctx.lineTo(300,600);
ctx.stroke();
ctx.font = "bold 24px serif";
// ctx.fillText("测试font",50,300);
ctx.textAlign = "start";
ctx.fillText("测试start",300,50);
ctx.textAlign = "left";
ctx.fillText("测试left",300,100);
ctx.textAlign = "end";
ctx.fillText("测试left",300,150);
ctx.textAlign = "right";
ctx.fillText("测试left",300,200);
ctx.textAlign = "center";
ctx.fillText("测试left",300,250);
textAlign
垂直对齐：textBaseline：top middle bottom hanging alphabatic ideographic
ctx.strokeStyle = "#999";
ctx.setLineDash([8]);
ctx.moveTo(30,200);
ctx.lineTo(700,200);
ctx.stroke();
ctx.font = " 24px serif";
ctx.textBaseline = "top";
ctx.fillText("测试top",50,200);
ctx.textBaseline = "middle";
ctx.fillText("测试middle",150,200);
ctx.textBaseline = "bottom";
ctx.fillText("测试middle",300,200);
textBaseline
文本绘制方法：
填充文字 fillText(text,x,y,maxWidth)
描边文字 strokeText(text,x,y,maxWidth)
const text = "劳动最光荣";
ctx.font = "bold 100px arial";
ctx.strokeStyle = "orange";
ctx.fillStyle = "green";
ctx.lineWidth = 5;
// 填充文字 fillText(text,x,y,maxWidth)
// 描边文字 strokeText(text,x,y,maxWidth)
ctx.fillText(text,300,200,300);
ctx.strokeText(text,300,400,400)
fillText(text,x,y,maxWidth) 、strokeText(text,x,y,maxWidth)
获取文字宽度的方法：measureText(text)
const getWdith = ctx.measureText(text);
console.log(getWdith)
measureText
网友评论