Rotierende Animation in Leinwand

Ich versuche, "Buen trabajo" in der Leinwand zu drucken und den Ausdruck um den Mittelpunkt Ursprung drehen. Ich bin mir nicht sicher, wie ich das machen soll. Ich habe versucht, eine Schleife zu erstellen, die Stück für Stück inkrementiert, aber ich denke, ich vermisse etwas.Rotierende Animation in Leinwand

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

Quelle

2017-03-15 MusicGirl

Ich habe versucht, einen Verweis auf diesen Post von StackOverflow.

HTML5 canvas animation and rotation

Es kann von der beabsichtigten verschieden sein, aber wird es hilfreich sein?

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

Quelle

2017-03-16 04:32:47 programminganddrive

Super hilfreich !!!!! Ich danke dir sehr. – MusicGirl

Rotierende Animation in Leinwand

Antwort

Verwandte Themen