HTML5 Canvas 文本围绕圆圈制作动画-前端问题

HTML5 Canvas Text Animating around circle(HTML5 Canvas 文本围绕圆圈制作动画)

本文介绍了HTML5 Canvas 文本围绕圆圈制作动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新了代码有什么问题?我知道它不旋转，但为什么文字是扭曲的.

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: