canvas 写字

yuyu_2019

于 2024-12-02 10:22:23 发布

阅读量230

点赞数 1

分类专栏： canvas的灵活应用文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yuyu_2019/article/details/144181257

版权

canvas的灵活应用专栏收录该内容

3 篇文章

订阅专栏

基础用法

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置字体样式
ctx.font = '20px Arial';
// 设置填充颜色
ctx.fillStyle = 'blue';
// 设置文本对齐方式
ctx.textAlign = 'center';
// 设置文本基线
ctx.textBaseline = 'middle';
// 在canvas中绘制文本
ctx.fillText('Hello, Vue Canvas!', canvas.width / 2, canvas.height / 2);

封装调用

drawText(text, x, y) {

	 const canvas = document.getElementById('myCanvas');
	 const ctx = canvas.getContext('2d');
	
	 // 设置字体样式
	 ctx.font = '20px Arial';
	 // 设置填充颜色
	 ctx.fillStyle = 'blue';
	 // 设置文本对齐方式
	 ctx.textAlign = 'center';
	 // 设置文本基线
	 ctx.textBaseline = 'middle';
	 // 在canvas中绘制文本
	 ctx.fillText(text, x, y);
}

this.drawText('abc', 50, 50)

循环调用

let serverData = [
  { text: '111111111' },
  { text: '222222222' },
  { text: '333333333' },
  { text: '444444444' }
]


for (let i = 0; i < serverData.length; i++) {
  this.drawText(serverData[i].text, 300 * i + 50, 50)
}