HTML5画布文本围绕圈子动画 [英] HTML5 Canvas Text Animating around circle
问题描述
更新了代码有什么问题?我知道它不旋转,但为什么是文本螺旋。
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).
- 这使用两个对象,一个用于文本本身,一个用于每个字符。
- 画布被旋转
- 每个字符都以圆形模式相对绘制
- This uses two objects, one for the text itself and one for each char.
- The string is split into char objects in the text object's constructor
- The canvas is rotated
- The chars are each drawn relative to each other in a circular pattern
文本对象
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;
}
$ b $ p现在我们需要做的就是创建一个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画布文本围绕圈子动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!