A Small code snippet that can be used for drawing gear on web page using HTML5
Update:
Code added in github
And Live Demo
The below is the Javascript that I used to draw this gear
Change the numberofTeath,segmentLenght,curve or pitch variables to change the respective value.
the full HTML code is given below
You can have this as a function and pass the variables as parameter to this function to draw more than one gear.
The second gear(shown in image)variables used are numberofTeath=20 and shifted the x axis to match the radius of the other gear.
_ Find Me on Google+
 | ||
| Finished Output of Gear |
Update:
Code added in github
And Live Demo
The below is the Javascript that I used to draw this gear
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var numberofTeath=10,segmentLenght=6,curve=6,pitch=10;
var enddeg=0,deg=0;
var angle=180/numberofTeath;
radius = numberofTeath*segmentLenght*2/Math.PI;
var rad2deg = 180/Math.PI;
context.beginPath();
context.arc(centerX, centerY, 4, 0, 2 * Math.PI, false);
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
for(var i=0;i<=numberofTeath;++i)
{
sdeg = i*angle*2;
senddeg= angle- (angle/curve);
enddeg= (sdeg+senddeg)/rad2deg;
deg = sdeg/rad2deg;
context.arc(centerX, centerY, radius, deg, enddeg, false);
sdeg = sdeg+angle;
enddeg= (sdeg+senddeg)/rad2deg;
deg = sdeg/rad2deg;
context.arc(centerX, centerY, radius-pitch, deg, enddeg, false);
}
context.strokeStyle = '#003300';
context.stroke();
context.closePath();
Change the numberofTeath,segmentLenght,curve or pitch variables to change the respective value.
the full HTML code is given below
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var numberofTeath=10,segmentLenght=6,curve=6,pitch=10;
var enddeg=0,deg=0;
var angle=180/numberofTeath;
radius = numberofTeath*segmentLenght*2/Math.PI;
var rad2deg = 180/Math.PI;
context.beginPath();
context.arc(centerX, centerY, 4, 0, 2 * Math.PI, false);
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
for(var i=0;i<=numberofTeath;++i)
{
sdeg = i*angle*2;
senddeg= angle- (angle/curve);
enddeg= (sdeg+senddeg)/rad2deg;
deg = sdeg/rad2deg;
context.arc(centerX, centerY, radius, deg, enddeg, false);
sdeg = sdeg+angle;
enddeg= (sdeg+senddeg)/rad2deg;
deg = sdeg/rad2deg;
context.arc(centerX, centerY, radius-pitch, deg, enddeg, false);
}
context.strokeStyle = '#003300';
context.stroke();
context.closePath();
</script>
</body>
</html>
You can have this as a function and pass the variables as parameter to this function to draw more than one gear.
The second gear(shown in image)variables used are numberofTeath=20 and shifted the x axis to match the radius of the other gear.
_ Find Me on Google+
No comments:
Post a Comment