canvas画布：绘制椭圆坏绕文本

马黑黑 · 发表于 2024-5-14 16:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

效果

代码

var ww = mycanv.width, hh = mycanv.height;

var ctx = mycanv.getContext('2d');

class ccText {

constructor(text) {

this.chars = text.split('');

};

draw(context) {

context.font = 'bold 50px sans-serif';

context.textAlign = 'center';

context.textBaseline = 'middle';

context.shadowOffsetX = -2;

context.shadowOffsetY = 2;

context.shadowColor = '#000';

context.shadowBlur = 4;

var a = 360 / this.chars.length, r1 = ww/2 - 60, r2 = hh/2 - 50;

this.chars.forEach((char,key) => {

var rad = (a * key - 90) * Math.PI / 180;

var x = ww/2 + r1 * Math.cos(rad), y = hh/2 + r2 * Math.sin(rad);

context.fillStyle = `#${Math.random().toString(16).substr(2,6)}`;

context.fillText(char, x, y);

});

};

var cc = new ccText('君不見黃河之水天上來');

cc.draw(ctx);

</script>

马黑黑 · 发表于 2024-5-14 17:00

思路：

利用三角函数 cos 和 sin 计算出每一个字绕椭圆圆周布排的点XY坐标值，大圆半径 r1 和小圆半径 r2 的依据分别是画布宽高各半，宽高不同就会得出椭圆绕排效果，宽高相同则得到圆形绕排效果。

【注】第20行代码，r1 宽除以2减60、r2 高除以2减50，减去的数基于两个层面进行考虑：一是接近文本大小的值（50px，见第13行代码），二是此例中宽度大于高度。也可以减去相同的数值。

马黑黑 · 发表于 2024-5-14 17:17

代码解释：

创建一个 ccText 类（代码8~28行），这个类通过构造函数（代码9~11行）将文本解析为数组，每一个数组元素包含一个字（字母）。

ccText 类有一个方法 draw(context)（代码12~27行），参数 context 指画笔。该方法：首先设置文本相关的属性（代码13~19行），有font设置、文本对齐设置、阴影设置等；接着，第20行代码，声明并计算平均角度 a、大圆半径 r1 和小圆半径 r2；然后，通过一个循环计算好每一个字的XY坐标点并将文字填充出来（代码在21~26行）。

关于圆周上XY坐标值的计算：

x = 圆心坐标x值 + 半径 * cos(弧度)
y = 圆心坐标y值 + 半径 * sin(弧度)

角度转弧度公式：

弧度 = 角度 * π / 180

第22行代码中，角度减去90是为了令第一个字位于最上方。原因：画布坐标系和HTML坐标系一样，0度指向3点钟方向，只有将其逆时针旋转90度，第一个字才会出现在圆周的顶点。