Build a round canvas html 5 canvas

Question

I try to create a circular track in the canvas, and it is very difficult for me to work with it. I really want this: Only a white circle, a red line, tick marks, small, then larger every 50 and a large tick mark with a number every 100 and a needle. I don't care about any of the other letters on it or the silver border. Can someone point me in the right direction? I am new to canvas, but I would not want to use any ready-made libraries or anything else.

Thanks!

Answer 1

Here is a working example. I hesitated to post all the code, because it is better when you can put it together and understand what it does. It can be difficult to edit this to do what you want to do if you do not know how to do it. I tried to comment what I could.

Although this does not look like this, I started with Justin's example. I thought it was worth mentioning.

Click on the sensor to increase pressure, acceleration, etc.

http://jsfiddle.net/JdLUw/

Conclusion:

Answer 2

Ok here, I went:

http://jsfiddle.net/77w3c/

It looks like:

I have not done everything for you, but it shows you how to make all the relevant parts without complicated mathematics. You should be able to make everything pretty easy from here.

Answer 3

This is the start: http://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates

I created something like this in PHP ten years ago or so. You can use the image as a base with mark marks (something beautiful than a few dropped ticks) and make a hand.

http://jsfiddle.net/2zhDp/

Change your code to this for the move () method ...

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