Costruisci una tela calibro 5 circolare circolare

Sto provando a costruire una sagoma circolare su tela e sto vivendo un momento davvero difficile. Voglio essenzialmente questo: enter image description here Solo il cerchio bianco, la linea rossa, i segni di tic, i più piccoli, poi uno più grande ogni 50, e un grande segno di tic con il numero ogni 100, e l'ago. Non mi interessa davvero nessuna delle altre scritte o il bordo argentato. Qualcuno può indicarmi la giusta direzione? Sono abbastanza nuovo per la tela ma non mi piacerebbe usare alcuna libreria prefabbricata o altro.Costruisci una tela calibro 5 circolare circolare

Grazie!

fonte

2012-01-20 Bill

probabilmente stai andando ad avere bisogno di leggere un tutorial. – david

Qualcuno di voi sa? Sono stato su google con non molta fortuna. – Bill

Ho iniziato qui: https://developer.mozilla.org/en/Canvas_tutorial – bennedich

Ecco un esempio funzionante. Ho esitato a postare l'intero codice, perché è meglio quando puoi metterlo insieme tu stesso e capire cosa sta facendo. Potrebbe essere difficile modificarlo per fare ciò che vuoi fare, se non sei sicuro di come è fatto. Ho provato a commentare quello che potevo.

Anche se non sembra, ho iniziato con l'esempio di Justin. Ho pensato che fosse degno di nota.

Cliccando il manometro per aumentare la pressione, accelerazione, ecc

http://jsfiddle.net/JdLUw/

uscita:

enter image description here

fonte

2012-01-21 02:04:29 WesleyJohnson

Grazie, Jason! Mi sono imbattuto nella funzione getNPointsInCircle un paio di giorni fa quando facevo ricerche per qualcosa al lavoro, quindi quando ho visto questa domanda era in qualche modo adatto al contesto in cui mi trovavo. – WesleyJohnson

Era semplicemente troppo bello non essere visualizzato. – ThinkingStiff

questo è un inizio: http://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates

ho costruito qualcosa di simile in PHP dieci anni fa o giù di lì. Puoi usare un'immagine come base con i segni di graduazione (qualcosa di più bello di un paio di segni di spunta renderizzati) e rendere la mano.

http://jsfiddle.net/2zhDp/

modificare il codice per questo per il metodo 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();

fonte

2012-01-20 22:47:53

Ho provato a sovrapporre l'ago a quell'immagine, ma ho scoperto che non era così preciso e più ho spostato l'ago più lontano ha – Bill

Dov'è il codice? –

Ecco l'ago che gira ... Non ho incluso l'immagine però http://jsfiddle.net/vPu3U/1/ – Bill

Va bene qui ya go:

http://jsfiddle.net/77w3c/

appare come questa

enter image description here

Non ho fatto tutto per te, ma ti mostra come realizzare tutte le parti rilevanti senza matematica complessa. Dovresti essere in grado di fare tutto abbastanza facilmente da qui.

fonte

2012-01-21 01:54:36

Costruisci una tela calibro 5 circolare circolare

risposta

Problemi correlati