Zbuduj płótno html 5 o przekroju kołowym

Próbuję utworzyć okrągłą miarę na płótnie i mam z nią naprawdę ciężki czas. Zasadniczo chcę tego: enter image description here Tylko białe kółko, czerwona linia, znaki tic, małe, potem większe co 50, i duży znak tic z liczbą co 100 i igłą. Naprawdę nie dbam o żadne inne pismo na nim lub srebrną granicę. Czy ktoś może wskazać mi właściwy kierunek? Jestem całkiem nowy na płótnie, ale nie chciałbym używać żadnych gotowych bibliotek ani niczego.Zbuduj płótno html 5 o przekroju kołowym

Dzięki!

Źródło

2012-01-20 Bill

Prawdopodobnie będzie trzeba przeczytać tutorial. – david

Czy ktoś z was zna? Cały czas byłem w Google, ale nie miałem szczęścia. – Bill

Zacząłem tutaj: https://developer.mozilla.org/en/Canvas_tutorial – bennedich

Oto działający przykład. Wahałem się, czy opublikować cały kod, ponieważ jest lepiej, gdy można go samemu złożyć i zrozumieć, co robi. Może to być trudne do edycji, aby zrobić to, co chcesz zrobić, jeśli nie jesteś pewien, jak to jest razem. Próbowałem komentować, co mogłem.

Mimo że nie wygląda na to, zacząłem od przykładu Justina. Pomyślałem, że warto o tym wspomnieć.

kliknij na mierniku do zwiększenia ciśnienia, przyspieszenia itp

http://jsfiddle.net/JdLUw/

wyjściowa:

enter image description here

Źródło

2012-01-21 02:04:29 WesleyJohnson

Dzięki, Jason! Właściwie to natknąłem się na funkcję getNPointsInCircle kilka dni temu, kiedy robiłem badania w poszukiwaniu czegoś w pracy, więc kiedy zobaczyłem to pytanie, po prostu pasowało to do kontekstu, w którym już byłem. – WesleyJohnson

To było zbyt wspaniałe, by nie wyświetlać. – ThinkingStiff

To jest początek: http://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates

zbudowałem coś podobnego w PHP dziesięć lat temu albo tak. Możesz użyć obrazu jako podstawy ze znacznikami (coś ładniejszego niż kilka renderowanych tyknięć) i wyrenderować rękę.

http://jsfiddle.net/2zhDp/

Zmień swój kod do tego dla metody move() ...

var ctx = document.getElementById('pump-discharge').getContext('2d'); 
ctx.clearRect(0, 0, 150, 150); // clears rectangle after each move 
var r = 40; 
var rads = i*(Math.PI/180); 
var x = r*Math.cos(rads) + 55; 
var y = r*Math.sin(rads) + 55; 

ctx.strokeStyle = "#D40000"; 
ctx.fillStyle = "#D40000"; 
ctx.lineWidth = 6; 
ctx.beginPath(); 
ctx.moveTo(55, 55); 
ctx.lineTo(x, y); 
ctx.stroke();

Źródło

2012-01-20 22:47:53

Próbowałem po prostu nakładać igłę na ten obraz, ale odkryłem, że nie było to tak dokładne i im bardziej odsuwałem igłę dalej dostał – Bill

Gdzie jest kod? –

Oto igła obraca się ... Nie dodałem obrazu jednak http://jsfiddle.net/vPu3U/1/ – Bill

Ok tutaj ya go:

http://jsfiddle.net/77w3c/

wygląda następująco:

enter image description here

Nie zrobiłem tego za ciebie, ale pokazuje ci, jak wykonać wszystkie istotne części bez skomplikowanej matematyki. Powinieneś być w stanie zrobić wszystko dość łatwo stąd.

Źródło

2012-01-21 01:54:36

Zbuduj płótno html 5 o przekroju kołowym

Odpowiedz

Powiązane problemy