画布中的旋转动画

我试图在画布上打印“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>

来源

2017-03-15 MusicGirl

我试着参考这篇文章的StackOverflow。

HTML5 canvas animation and rotation

可能从预期的一个不同，但会是有帮助吗？

<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>

来源

2017-03-16 04:32:47 programminganddrive

超好玩的!!!!!非常感谢。 – MusicGirl

画布中的旋转动画

回答

相关问题