Javascript 画布中的旋转动画_Javascript_Animation_Canvas_Rotation_Html5 Canvas

Javascript 画布中的旋转动画

javascript animation canvas html5-canvas

Javascript 画布中的旋转动画,javascript,animation,canvas,rotation,html5-canvas,Javascript,Animation,Canvas,Rotation,Html5 Canvas,我试图在画布上打印“Buen trabajo”，并让短语围绕中心原点旋转。我不知道该怎么做。我试图创建一个一点一点递增的循环，但我想我遗漏了一些东西 <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); function drawGoodJob(){ var counter = 60;//so the object won't run for more than

我试图在画布上打印“Buen trabajo”，并让短语围绕中心原点旋转。我不知道该怎么做。我试图创建一个一点一点递增的循环，但我想我遗漏了一些东西

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawGoodJob(){
    var counter = 60;//so the object won't run for more than 60 seconds
    var increment = 10;//amount to increment the canvas by
    while(counter<60){
    ctx.rotate(increment*Math.PI/180);
    increment+20;
    }
drawGoodJob();
ctx.font = "80px Verdana";

// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");

// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Buen trabajo", 150, 400);//strokeText makes the letters hollow
}
</script>


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
函数drawGoodJob（）{
var counter=60；//因此对象的运行时间不会超过60秒
var increment=10；//画布的增量
而（counter我试图参考StackOverflow的这篇文章

它可能与预期的不同，但会有帮助吗
<html>
<head>

</head>
<body>
<canvas id="testCanvas" width="800" height="600">

</canvas>

<script>
var rotation = 0;


(function init() {

    canvas = document.getElementById("testCanvas");
    context = canvas.getContext("2d");

    context.clearRect(0, 0, context.width, context.height);
    context.fillStyle = "lightblue";

    requestAnimationFrame(draw);

})();

function draw() {

    // reset transforms before clearing
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);

    // tramslate and rotate an absolute rotation value
    context.translate(canvas.width/2, canvas.height/2);
    context.rotate(rotation);

    context.font = "80px Verdana";
    // Create gradient
    var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "green");

    // Fill with gradient
    context.strokeStyle = gradient;
    context.strokeText("Buen trabajo",-250, 0);//strokeText makes the letters hollow

    // update rotation value and request new frame
    rotation += 0.04;

    requestAnimationFrame(draw)
}

</script>
</body>
</html>


var旋转=0；
（函数init（）{
canvas=document.getElementById（“testCanvas”）；
context=canvas.getContext（“2d”）；
clearRect（0，0，context.width，context.height）；
context.fillStyle=“lightblue”；
请求动画帧（绘制）；
})();
函数绘图（）{
//在清除之前重置转换
setTransform（1,0,0,1,0,0）；
clearRect（0，0，canvas.width，canvas.height）；
//平移并旋转绝对旋转值
context.translate（canvas.width/2，canvas.height/2）；
上下文。旋转（旋转）；
context.font=“80px Verdana”；
//创建渐变
var gradient=context.createLinearGradient（0,0，canvas.width，0）；
渐变。添加颜色停止（“0”，“洋红色”）；
渐变。添加颜色停止（“0.5”，“蓝色”）；
渐变。添加颜色停止（“1.0”、“绿色”）；
//用梯度填充
context.strokeStyle=渐变；
strokeText（“Buen trabajo”，-250，0）；//strokeText使字母空心
//更新旋转值并请求新帧
旋转+=0.04；
requestAnimationFrame（绘制）
}