Construir un calibre circular html 5 lienzo

Estoy tratando de construir un calibre circular en lona, y estoy teniendo un momento muy difícil con él. Esencialmente quiero esto: enter image description here Solo el círculo blanco, línea roja, marcas de tic, los pequeños, luego uno más grande cada 50, y una gran marca de tic con el número cada 100, y la aguja. Realmente no me importa ninguna de las otras escrituras o el borde plateado. ¿Alguien puede señalarme en la dirección correcta? Soy bastante nuevo en el lienzo, pero me gustaría no utilizar ninguna biblioteca preconstruida ni nada.Construir un calibre circular html 5 lienzo

Gracias!

Fuente

2012-01-20 Bill

Usted está probablemente va a tener que leer a través de un tutorial. – david

¿Alguno de ustedes sabe? He estado en Google sin mucha suerte. – Bill

Empecé aquí: https://developer.mozilla.org/en/Canvas_tutorial – bennedich

Aquí hay un ejemplo de trabajo. Dudé en publicar todo el código, porque es mejor cuando puedes armarlo tú mismo y comprender lo que está haciendo. Puede ser difícil editar esto para hacer lo que desea hacer, si no está seguro de cómo se arma. Intenté comentar lo que pude.

Aunque no lo parezca, comencé con el ejemplo de Justin. Pensé que valía la pena mencionarlo.

Haga clic en el indicador para aumentar la presión, aceleración, etc.

http://jsfiddle.net/JdLUw/

Salida:

enter image description here

Fuente

2012-01-21 02:04:29 WesleyJohnson

¡Gracias, Jason! De hecho, me encontré con la función getNPointsInCircle hace un par de días cuando investigaba algo en el trabajo, así que cuando vi esta pregunta, encajaba en el contexto en el que ya me encontraba. – WesleyJohnson

Era demasiado increíble para no mostrarla. – ThinkingStiff

Este es un comienzo: http://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates

I construido algo similar en PHP hace una década más o menos. Podría usar una imagen como base con las marcas (algo más bonito que un par de tics renderizados) y renderizar la mano.

http://jsfiddle.net/2zhDp/

cambiar el código para esto por el método 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();

Fuente

2012-01-20 22:47:53

Intenté simplemente superponer la aguja sobre esa imagen, pero descubrí que no era tan precisa y cuanto más movía la aguja más lejos tiene – Bill

¿Dónde está el código? –

Aquí está la aguja girando ... No incluí la imagen aunque http://jsfiddle.net/vPu3U/1/ – Bill

Bueno aquí ya go:

http://jsfiddle.net/77w3c/

se ve así:

enter image description here

No lo hice todo por usted, pero le muestra cómo hacer todas las partes relevantes sin matemática compleja. Deberías poder hacer todo muy fácilmente desde aquí.

Fuente

2012-01-21 01:54:36

Construir un calibre circular html 5 lienzo

Respuesta

Cuestiones relacionadas