Построить круговой шаблон HTML 5 холст

Question

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

Спасибо!

Answer 1

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

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

Нажмите на датчик, чтобы увеличить давление, ускорение и т. Д.

http://jsfiddle.net/JdLUw/

Выход:

Answer 2

Хорошо, вот и ты:

http://jsfiddle.net/77w3c/

Выглядит так:

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

Answer 3

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

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

http://jsfiddle.net/2zhDp/

Измените свой код на этот для метода 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();