问题描述
更新了代码有什么问题?我知道它不旋转,但为什么文字是扭曲的.
Updated what is wrong with the code? I know it doesnt rotate but why is the text screwy.
有谁知道为什么我正在努力解决这个问题
Does anyone know why I am tearing my hair out trying to figure this out
function showCircularNameRotating(string, startAngle, endAngle){
//context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '32pt Sans-Serif';
context.fillStyle = '#1826B0';
circle = {
x: canvas.width/2,
y: canvas.height/2,
radius: 200
};
var radius = circle.radius,
angleDecrement = (startAngle - endAngle/string.length-1),
angle = parseFloat(startAngle),
index = 0,
character;
context.save();
while(index <string.length){
character = string.charAt(index);
context.save();
context.beginPath();
context.translate(circle.x + Math.cos(angle) * radius,
circle.y - Math.sin(angle) * radius);
context.rotate(Math.PI/2 - angle);
context.fillText(character, 0,0);
context.strokeText(character,0,0);
angle -= angleDecrement;
index++;
context.restore();
}
context.restore();
}
推荐答案
是的,有可能.
这是一个简单的方法,您可以在此基础上进行构建(我现在就制作了它,因此肯定可以通过各种方式对其进行优化和调整).
Here is a simple approach which you can build upon (I made it right now so it can certainly be optimized and tweaked in various ways).
- 这使用了两个对象,一个用于文本本身,一个用于每个字符.
- 字符串在文本对象的构造函数中被拆分为 char 对象
- 画布旋转
- 每个字符都以圆形图案相对于彼此绘制
文本对象
function Text(ctx, cx, cy, txt, font, radius) {
this.radius = radius; // expose so we can alter it live
ctx.textBaseline = 'bottom'; // use base of char for rotation
ctx.textAlign = 'center'; // center char around pivot
ctx.font = font;
var charsSplit = txt.split(''), // split string to chars
chars = [], // holds Char objects (see below)
scale = 0.01, // scales the space between the chars
step = 0.05, // speed in steps
i = 0, ch;
for(; ch = charsSplit[i++];) // create Char objects for each char
chars.push(new Char(ctx, ch));
// render the chars
this.render = function() {
var i = 0, ch, w = 0;
ctx.translate(cx, cy); // rotate the canvas creates the movement
ctx.rotate(-step);
ctx.translate(-cx, -cy);
for(; ch = chars[i++];) { // calc each char's position
ch.x = cx + this.radius * Math.cos(w);
ch.y = cy + this.radius * Math.sin(w);
ctx.save(); // locally rotate the char
ctx.translate(ch.x, ch.y);
ctx.rotate(w + 0.5 * Math.PI);
ctx.translate(-ch.x, -ch.y);
ctx.fillText(ch.char, ch.x, ch.y);
ctx.restore();
w += ch.width * scale;
}
};
}
Char 对象
function Char(ctx, ch) {
this.char = ch; // current char
this.width = ctx.measureText('W').width; // width of char or widest char
this.x = 0; // logistics
this.y = 0;
}
现在我们要做的就是创建一个Text对象,然后循环调用render方法:
Now all we need to do is to create a Text object and then call the render method in a loop:
var text = new Text(ctx, cx, cy, 'CIRCULAR TEXT', '32px sans-serif', 170);
(function loop() {
ctx.clearRect(0, 0, w, h);
text.render();
requestAnimationFrame(loop);
})();
如前所述,这里有很大的优化空间.最昂贵的部分是:
As said, there is plenty of room for optimizations here. The most expensive parts are:
- 文字渲染(先将文字渲染成图片)
- 使用保存/恢复对每个字符进行局部旋转
- 小事
不过,我会把它作为 OP 的练习 :)
I'll leave that as an exercise for OP though :)
这篇关于HTML5 Canvas 文本围绕圆圈制作动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!