Построить круглый указатель html 5 холст

Я пытаюсь построить круглую колею в холсте, и мне очень тяжело с ней справиться. Я действительно хочу этого: enter image description here Только белый круг, красная линия, знаки тика, маленькие, затем более крупные каждые 50 и большая тиковая метка с числом каждые 100 и иглой. Меня не волнует ни одно из других писем на нем или серебряная граница. Может кто-то указать мне верное направление? Я довольно новичок в холсте, но я бы не хотел использовать какие-либо готовые библиотеки или что-то еще.Построить круглый указатель html 5 холст

Спасибо!

источник

2012-01-20 Bill

Вы, вероятно, понадобится, чтобы прочитать учебник. – david

У вас есть кто-нибудь из вас знает? Я был с большим удовольствием. – Bill

Я начал здесь: https://developer.mozilla.org/en/Canvas_tutorial – bennedich

Настоящий рабочий пример. Я колебался, размещая весь код, потому что лучше, когда вы можете собрать его вместе и понять, что он делает. Может быть, трудно отредактировать это, чтобы делать то, что вы хотите сделать, если вы не знаете, как это соединить. Я пробовал комментировать, что мог.

Несмотря на то, что это не похоже на это, я начал с примера Джастина. Я подумал, что стоит упомянуть.

Нажмите на датчике для повышения давления, ускорения и т.д.

http://jsfiddle.net/JdLUw/

Выход:

enter image description here

источник

2012-01-21 02:04:29 WesleyJohnson

Спасибо, Джейсон! Я на самом деле наткнулся на функцию getNPointsInCircle пару дней назад, когда делал исследования для чего-то на работе, поэтому, когда я увидел этот вопрос, это просто соответствовало контексту, в котором я уже был. – WesleyJohnson

Это было просто ужасно, чтобы не отображать. – ThinkingStiff

Это начало: http://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates

Я построил что-то подобное в PHP десять лет назад или около того. Вы можете использовать изображение в качестве базы с отметками меток (что-то красивое, чем несколько отброшенных тиков) и сделать руку.

http://jsfiddle.net/2zhDp/

Измените код этого метода для перемещения() ...

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();

источник

2012-01-20 22:47:53

Я пробовал просто накладывать иглу на это изображение, но я узнал, что это было не так точно, и чем больше я двигал иглу дальше он получил – Bill

Где код? –

Вот игла вращается ... Я не включил изображение, хотя http://jsfiddle.net/vPu3U/1/ – Bill

Хорошо здесь я пойти:

http://jsfiddle.net/77w3c/

выглядит следующим образом:

enter image description here

Я не делал все это для вас, но он показывает вам, как сделать все соответствующие части без сложной математики. Вы должны быть в состоянии сделать все довольно легко отсюда.

источник

2012-01-21 01:54:36

Построить круглый указатель html 5 холст

ответ

Смежные вопросы