Animować koło Canvas, aby rysować na ładunku

OK Hello.Animować koło Canvas, aby rysować na ładunku

Zdecydowałem się zacząć używać płótna HTML dla małego projektu, który mam.

Nie ma jeszcze prawdziwego początku. Właśnie uczę się podstaw płótnie i chcę Animacja krąg

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     background: #222; 
     } 

    </style> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<body> 
<canvas id="myCanvas" width="578" height="250"></canvas> 

    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = canvas.width/2; 
     var y = canvas.height/2; 
     var radius = 75; 
     var startAngle = 1.5 * Math.PI; 
     var endAngle = 3.2 * Math.PI; 
     var counterClockwise = false; 
     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
     context.lineWidth = 15; 
     // line color 
     context.strokeStyle = 'black'; 
     context.stroke(); 
    </script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script> 
</body> 
</html>

Oto skrzypce http://jsfiddle.net/oskar/Aapn8/ co próbuję osiągnąć. Nie jestem zafascynowany efektem "Odbijanie".

Ale zasadniczo chcę, żeby rysował na stronie ładowanie i zatrzymał się przy pożądanym kącie łuku Oto skrzypce tego, co stworzyłem do tej pory.

http://jsfiddle.net/skerwin/uhVj6/

Dzięki

Źródło

2013-03-28 Blackline

http://codepen.io/dcdev/pen/upjDy – davidcondrey

Live Demo

// requestAnimationFrame Shim 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
           window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
    window.requestAnimationFrame = requestAnimationFrame; 
})(); 



var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var endPercent = 85; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

context.lineWidth = 10; 
context.strokeStyle = '#ad2323'; 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 
context.shadowBlur = 10; 
context.shadowColor = '#656565'; 


function animate(current) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    context.stroke(); 
    curPerc++; 
    if (curPerc < endPercent) { 
     requestAnimationFrame(function() { 
      animate(curPerc/100) 
     }); 
    } 
} 

animate();

Zasadniczo użyłem tej samej formuły z opublikowanego linku do wersji demonstracyjnej. Następnie dodałem funkcję animacji, która po wywołaniu zaktualizuje okrąg, aż osiągnie pożądany procent końcowy.

Animacja jest nieustannie wywoływana przez requestAnimationFrame, jest to preferowany sposób wykonywania dowolnych animacji na płótnie. Za każdym razem, gdy jest wywoływana animate, aktualny procent jest zwiększany o jeden, który jest następnie używany do przerysowywania łuku.

Źródło

2013-03-28 22:24:50 Loktar

Dzięki, że udało Ci się ... Mam pewne problemy z moją przeglądarką: - [ – metalwings

] Wydaje się, że twoja wersja demonstracyjna na żywo nie zawiera żadnych aktualizacji? Wygląda tak samo – Blackline

Zapomniał dodać funkcję animacji – metalwings

trzy etapy:

1) Make an "init" function which will assign the variables (they aren't in any 
function). 
2) Then use requestAnimationFrame, or setInterval with your 
drawing function you will create. 
3) In this "drawing/updating" function you're going to 
write your code to do the maths and then just animate the updated circle.

Nie ma żadnych funkcji w kodzie. Jeśli nie wiesz jak zrobić funkcje i używać ich + co jest zmienna globalna lepiej przeczytać najpierw tutoriali na ten temat, ale mimo to postaram się zrobić wam przykład :)

Źródło

2013-03-28 21:35:32 metalwings

OK. jeśli mógłbyś mi pomóc z jakąś skrzypią, która byłaby świetna. Jestem programistą HTML/CSS, który wkracza do Canvas. Niejasno wiem o funkcjach (z PHP). – Blackline

Ok, zrobię skrzypce, kiedy skończę :) Hmm ... Nie znam zbyt dobrze PHP, ale myślę, że jest taki sobie równy. Płaszczyzna używa JavaScript i jQuery (która jest jak JavaScript) ... Mam nadzieję, że skończy się za 30 minut :) – metalwings

Będę oczekiwał na twoje metalowe skrzypce. – Blackline

Animować koło Canvas, aby rysować na ładunku

Odpowiedz

Powiązane problemy