canvas(五)文本属性

最新推荐文章于 2024-08-18 04:43:55 发布

我在人间贩卖青春

最新推荐文章于 2024-08-18 04:43:55 发布

阅读量993

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_44178305/article/details/122516426

版权

canvas 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

文章目录

字体设置
textAlign水平对齐
textBaseline 垂直对齐
文本绘制
布艺文字效果

字体设置

canvas 设置字体：ctx.font=‘bold 18px serif’;
更多属性

textAlign水平对齐

ctx.textAlign='start';
下方文字的 X 位置都是一样，都是垂直虚线的x 位置，它们的textAlign 属性各不相同

注意：start 和end 会受html 的dir 属性影响;默认情况：<html dir='ltr'>，就像上边一样。当<html dir='rtl'>时，对齐方式刚好相反。

textBaseline 垂直对齐

ctx.textBaseline='top';

文本绘制

填充文字 fillText(text, x, y , maxWidth)
描边文字 strokeText(text, x, y , maxWidth)
获取文字宽度的方法：measureText(text)

布艺文字效果

const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

/*文字内容*/
const text = '小陈';

/*文字位置*/
const [x, y] = [50, 200];

/*字体属性，文字加粗，大小：200px，字体：arial*/
ctx.font = 'bold 200px arial';

/*投影，颜色：rgba(0,0,0,0.6)，垂直偏移：2，模糊：4*/
ctx.shadowColor = 'rgba(0,0,0,0.6)';
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 4;

/*填充文字，颜色：#a76921*/
ctx.fillStyle = '#a76921';
ctx.fillText(text, x, y);

/*实线描边文字，颜色：#f0d5ac，线宽：8*/
ctx.lineWidth = 8;
ctx.strokeStyle = '#f0d5ac';
ctx.strokeText(text, x, y);

/*虚线描边文字，颜色：#333，线宽：1，线段长度[5,3]*/
ctx.lineWidth = 1;
ctx.strokeStyle = '#333';
ctx.setLineDash([5, 3]);
ctx.strokeText(text, x, y);