畫布中的旋轉動畫

我試圖在畫布上打印「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

畫布中的旋轉動畫

回答

相關問題