Engrenagem de Dente Reto (revisado)


Este material foi revisado em 10/10/18, o chanfro do dente da engrenagem deve tangeciar o círculo do pé do dente. O chanfro será formado com apenas um furo. Engrenagens "grandes" o melhor é fazer dois furos, um para cada chanfro no pé do dente. Na verdade a escolha por fazer um ou dois furos para o chanfro depende do tamanho da broca, que depende do tamanho da máquina.
Entendendo como desenhar uma engrenagem com apenas um furo no pé do dente para formar os dois chanfros do vão será bem mais fácil modificar o desenho.
O diâmetro interno ou diâmetro do pé do dente pode ser diminuido sem alterar o engrenamento. Para ocorrer o engrenamento o vão tem que se encaixar na cabeça do dente.
A engrenagem é uma peça que requer boa precisão, seu desenho deve ser detalhado e bem calculado.

O desenho é feito com o sistema de coordenadas cartesiano, a segunda evolvente é obtida da primeira com a inversão do sinal das coordenadas do eixo-y do desenho, essa inversão é a mesma utilizada para gráficos simétricos ao eixo-x.
O desenho é feito simetricamente ao eixo-x conforme figura1, para depois, empregar os conceitos de rotação de pontos da geometria analítica para posicionar a evolvente2 e seu chanfro na posição que formará o primeiro dente.
Após a construção do primeiro dente os demais são feitos com apenas um laço de repetição.

Será empregado o termo circunferência e círculo como sinônimos, embrora circunferência seja formada por pontos equidistante de seu centro e círculo seja formado por todos os pontos delimitados pela circunferência.
 
Etapa 2: Desenho da evolvente, de um seguimento de reta e do Círculo de Chanfro do Pé do Dente
Continuando a matéria sobre engrenagem de dente reto, depois da criação da evolvente o próximo passo será desenhar um segmento de reta tangente a evolvente e ao círculo de chanfro. Esse segmento garantirá que o vão de uma engrenagem se encaixará na cabeça do dente da outra engrenagem.
O círculo de chanfro deve ser tangente ao círculo interno (círculo do pé do dente).
Nesta fase não está sendo considerado o dimensionamento do dente.
Na figura1 abaixo os valores de ri, r e rb foram escolhidos aleatoriamente, porém compatíveis.

ri=60
rb=100
PoP1=20
r=(80² - 60²)/(2*60)
Obs: 80 obtido de 100-20

O objetivo é apenas desenhar a primeira evolvente, um seguimento de reta tangente a evolvente e ao círculo de chanfro que é tangete ao círculo interno.
O β DA FIGURA BAIXO NÃO É O MESMO DA FÓRMULA DA EVOLVENTE.



Figura1 (furo.jpg)

r: é o raio do círculo que faz o chanfro da evovlente1, esse circulo é tangente ao eixo-x em P1.
Po: é o início da evolvente1 e evolvente2.
P2: ponto de tangência entre o círculo de chanfro com o círculo interno.

Na figura2 abaixo é feito o cálculo do raio do círculo de chanfro.

Figura2 (evolvente4.jpg)
Obs: a evolvente2 terá um círculo de chanfro simétrico ao da evolvente1 em relação ao eixo-x, cuja fórmula é a mesma, mudando apenas o seu centro.

Centralização
: a translação dos pontos está sendo feita diretamente nas coordenadas com h e k para centralizar a figura no canvas. h = canvas.heigth/2 e k = canvas.width/2.
arquivo.html

Esse arquivo possui um canvas e um botão para execução da função app4.func4().

<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file4.js"></script>
</head>
<body>
<canvas id="c4" width="500" height="400"></canvas>
<botton style="border: 1px solid black;" onclick="app4.func4()">Clique aqui!</botton>
</body>
</html>

Arquivo externo javascript, file4.js
O arquivo externo file4.js (extensão .js) pode ser feito em um editor de texto simples.
O círculo de base tem basicamente o mesmo código que nos arquivos anteriores.
A fórmula cartesiana da evolvente já foi apresentada na Etapa1:
x = rb *( cosβ + β * senβ)
y = rb * (senβ - β * cos β)
No código abaixo rb = 100, ri=60, r=((80*80)-(60*60))/(2*60).
h e k fazem a centralização do desenho no canvas.
O chanfro desenhado está abaixo do eixo-x com centro (80,-r).
O seguimento de reta é igual a 20. (PoP1).
var app4 = {};
app4.func4=(function () {

var canvas4 = document.getElementById("c4");
  var ctx = canvas4.getContext("2d");
  ctx.translate(0, 400); //eixo-x é colocado no lado (horizontal) debaixo da tela
  ctx.scale(1, -1); //eixo-y é invertido e fica para cima, com esta duas alterações a origem do sistema de
                          //coordenadas passa a ser o canto inferior esquerdo igual ao sistema cartesiano
    var step = 2*Math.PI/1000;
    var h = 250;
    var k = 200;
    ctx.beginPath();  //"circunferência de base"
    for(var beta=0;  beta < 2*Math.PI;  beta+=step)
     { var x = h + 100*Math.cos(beta);
       var y = k - 100*Math.sin(beta);   
       ctx.lineTo(x,y);
     }
    ctx.closePath();    
    ctx.stroke();

    ctx.beginPath();//"circunferência interna"
    for(var beta=0;  beta < 2*Math.PI;  beta+=step)
     { var x2 = h + 60*Math.cos(beta);
       var y2 = k - 60*Math.sin(beta);   
       ctx.lineTo(x2,y2);
     }
    ctx.closePath();    
    ctx.stroke();


    ctx.beginPath();//seguimento PoP1
    ctx.moveTo(h+100, k);
    ctx.lineTo(h+80, k);
    ctx.closePath();    
    ctx.stroke();

    var r=((80*80)-(60*60))/(2*60);//raio de chanfro
    ctx.beginPath();//"circunferência de chanfro"
    for(var beta=0;  beta < 2*Math.PI;  beta+=step)
     { var x3 = h+80   + r*Math.cos(beta);
       var y3 = k-r - r*Math.sin(beta);   
       ctx.lineTo(x3,y3);
     }
    ctx.closePath();    
    ctx.stroke();

   
    ctx.beginPath();//desenho da evolvente
    for(var beta=0;  beta < 2*Math.PI;  beta+=step)
     {
     var x4=h+100*Math.cos(beta)+100*beta*Math.sin(beta);
     var y4=k+100*Math.sin(beta)-100*beta*Math.cos(beta);
  
     ctx.lineTo(x4,y4);
     }
   
    ctx.stroke();
    ctx.translate(0, 400);
    ctx.scale(1, -1);
});


Desenho


  Clique aqui!

Obs: ao trabalhar com JavaScript e HTML a execução do código é feita de cima para baixo, essa e a característica da linguagem de marcação. Ou seja, o código não consegue usar uma variável antes da sua atribuição.
Exemplo errado:
var x = 2*y;
var y =2;
Exemplo certo:
var y=2;
var x = 2*y;

Obs:  expressões  de matemática em JavaScript são  feitas com o uso dos  parentesis  (). Sequencia de multiplicação ou  divisão com  soma ou subtração deve ser  separadas por parentisis. Exemplo:
var x = (5*2) + 4;
var x = (2*(5+2)) + 1;

Etapa 3
: Desenho da Evolvente, de um Seguimento de Reta e do Arco de Chanfro do Pé do Dente
Devemos substituir o círculo de chanfro pelo arco de chanfro.

Para o desenho do Chanfro do Pé do Dente será utilizado a função arc().
ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
x: The x-coordinate of the center of the circle   
y: The y-coordinate of the center of the circle   
r: The radius of the circle   
sAngle: The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)   
eAngle: The ending angle, in radians   
counterclockwise: Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.

Obs:

arc()
clockwise: no sentido horário para o arco (com false ou sem).
counter-clockwise: no sentido anti-horário para o arco (com true).
Porém:
ctx.scale(1, -1): inverte o sinal do eixo-y, positivo fica para cima. O padrão passa a ser anti-horário para o ângulo positivo tanto para o sistema de coordenadas cartesiano quanto para o arco. Com ctx.scale(1,-1) false indica anti-horário e true horário. Essa mudança é decorrente da geometria analítica.

Portanto:
Centro do arco: (h+r2, k-r);
Raio do arco: r = ((80*80)-(60*60))/(2*60)
Ângulo de início: 90º = π/2 rd;
Ângulo final: π/2 + α;
tgα = r1/r=> atan(r1/r) = αrad;
ctx.arc(h+80, k-r,r,Math.PI/2,(Math.PI/2)+Math.atan(80/r));
O β DA FIGURA BAIXO NÃO É O MESMO DA FÓRMULA DA EVOLVENTE.

Figura3 (evolvente5.jpg)
rie
é calculado na  figura14 da etapa4

Centralização: a translação dos pontos está sendo feita diretamente nas coordenadas com h e k para centralizar a figura no canvas. h = canvas.heigth/2 e k = canvas.width/2.

arquivo.html
Esse arquivo possui duas canvas e dois botões para execução das funções app4.func4() e app5.func5().

<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file5.js"></script>
</head>
<body>
<canvas id="c4" width="500" height="400"></canvas>
<botton style="border: 1px solid black;" onclick="app4.func4()">Clique aqui!</botton><br>
<canvas id="c5" width="500" height="400"></canvas>
<botton style="border: 1px solid black;" onclick="app5.func5()">Clique aqui!</botton>
</body>
</html>

Arquivo externo javascript, file5.js
var app5 = {};
app5.func5=(function () {

var canvas5 = document.getElementById("c5");
  var ctx = canvas5.getContext("2d");
  ctx.translate(0, 400);
  ctx.scale(1, -1);

    var step = 2*Math.PI/1000;
    var h = 250;
    var k = 200;
    ctx.beginPath(); 
    for(var beta=0;  beta < 2*Math.PI;  beta+=step)
     { var x = h + 100*Math.cos(beta);
       var y = k - 100*Math.sin(beta);   
       ctx.lineTo(x,y);
     }
    ctx.closePath();    
    ctx.stroke();

    ctx.beginPath();
    for(var beta=0;  beta < 2*Math.PI;  beta+=step)
     { var x2 = h + 60*Math.cos(beta);
       var y2 = k - 60*Math.sin(beta);   
       ctx.lineTo(x2,y2);
     }
    ctx.closePath();    
    ctx.stroke();


    ctx.beginPath();
    ctx.moveTo(h+100, k);
    ctx.lineTo(h+80, k);
    ctx.closePath();    
    ctx.stroke();


    ctx.beginPath();
    var r=((80*80)-(60*60))/(2*60);
    ctx.arc(h+80, k-r,r,Math.PI/2,(Math.PI/2)+Math.atan(80/r));  
    ctx.stroke();

   
    ctx.beginPath(); 
    for(var beta=0;  beta < 2*Math.PI;  beta+=step)
     {
     var x4=h+100*Math.cos(beta)+100*beta*Math.sin(beta);
     var y4=k+100*Math.sin(beta)-100*beta*Math.cos(beta);
  
     ctx.lineTo(x4,y4);
     }
   
    ctx.stroke();
    ctx.translate(0, 400);
    ctx.scale(1, -1);
});


Desenho




  Clique aqui!

Etapa4
Até aqui o objetivo foi aprender como desenhar com o HTML5 e com o JavaScript sem se preocupar com as dimensões.
Para fazer o desenho é necessário o dimensionamento dos dentes  de forma técnica para que possa ocorrer o engrenamento entre duas engrenagens. A seguir será apresentado um mínimo de informação para continuação da matéria.
Nesta etapa será dimensionado o desenho da etapa anterior.

4.1. Escala e Unidade de Medida
A escala é uma razão entre a dimensão de "desenho" e a dimensão real, exemplo: escala 2 : 1 quer dizer que o desenho foi duplicado (escala = tamanho do desenho : tamanho real).

4.2. Unidade de Medida de Comprimento
São as unidades de medida de apenas uma dimensão (largura ou altura) comumente empregadas na física ou matemática, tais como, centímetro, polegada, etc. O comprimento corresponde as coordenadas no eixo-x e no eixo-y.
No caso dos monitores a tela é onde são plotados as imagens. A tela possui duas dimensões, uma no eixo-x e outra no eixo-y.   
O pixel é a unidade lógica de medida do monitor.
Resolução gráfica do monitor: é a dimensão da tela, largura e altura (em pixes) por unidade de comprimento. A maioria dos monitores tem 96 pixels per inch (96ppi), ou seja, 96 pixels por polegadas para a tela.
Para a impresão a resolução é medida em dots per inch (DPI), pontos por polegadas.
1 in (uma polegada) tem 2,54cm que corresponde a  96px na tela;
1 cm (um centímetro) tem  96px/2.54 na tela (37.7952755906px);
1 mm (um milímetro) tem 96px/25.4 na tela (3.77952755906px);
q - 1/4 do milímetro;
pc - pica: 12 points ou 1/6in;
pt - point: 1/72in;
px - pixel: 1/96in;

Obs:
Nos próximos desenhos será adotada a resolução da tela como 96ppi (1mm = 3.779px) e arredondada para 1mm = 4px. Assim, por exemplo, 100mm terá 400px.

4.5. Unidades para ângulos
deg - grau: um círculo tem 360deg;
grad - grado: um círculo tem 400grad;
rad - radiano: um círculo tem 2š¯›‘rad;
turn - volta: um círculo tem 1turn;

4.6. Engrenagem de Dentes Retos
O intuito deste trabalho é apresentar as principais propriedades da roda dentada ou também chamada engrenagem, com a finalidade didática.
A engrenagem é tão útil a civilização quanto a própria roda, ou melhor, a engrenagem é uma roda para transmissão de movimentos quase sempre entre dois eixos.

O desenho de engrenagem não necessita do desenho do seu dente, contudo, este trabalho objetiva justamente dominar essa técnica a fim de chegar mais próximo da realidade e de comprovar através da cotagem suas dimensões reais.

Nos desenhos anteriores o dente não foi dimensionados porque o objetivo era aprender como desenhá-lo. Para prosseguir com o desenho da engrenagem será utilizado suas fórmulas que são facilmente encontradas na literatura a respeito.

Engrenagens Cilíndricas Retas: Possuem dentes paralelos ao eixo de rotação da engrenagem. Transmitem rotação entre eixos paralelos.


Figura4 (engr.jpg)

4.7. Diâmetro de Base
O diâmetro de base é a principal medida para a construção da engrenagem porque a envolvente é gerada apartir dele. O módulo, o número de dentes e o diâmetro primitivo tem como referência o diâmetro de base e o ângulo de pressão.

O diâmetro da circunferência de base é obtido através do ângulo de pressão, que pode assumir os valores de 20º, 25º e 14,5º. O primeiro valor é utilizado na grande maioria das vezes, a ponto de já ser considerado um valor padrão. O ângulo de 25º ainda é utilizado em engrenagens fabricadas na América do Norte.
cosφ = rb/rp => rb = rp.cosφ
ou
Como 2.rb=db e 2.rp=dp
cosφ = 2.rb/2.rp => db = dp.cosφ

4.8. Ângulo de ação ou de pressão
(φ)
É o ângulo que define a direção da força que a engrenagem motora exerce sobre a engrenagem movida. A figura abaixo mostra que o pinhão (coroa 1) exerce uma força na coroa 2, formando um ângulo (φ) com a tangente comum às circunferências primitivas (reta s chama linha de pressão). O ponto C é o ponto de contato entre as duas evolventes durante o engrenamento.

Figura5 (img5.jpg)

C: é o ponto traçador, é o ponto de contato entre as duas evolventes que percorre o trajeto T1 para T2. Tais evolventes são geradas simultaneamente pelo ponto traçador.
T2C e CT1: raio de curvatura da curva evolvente da coroa2 e coroa1 respectivamente.
s: é a linha geradora, contem os pontos de tangencias T1 e T2, essa linha não muda de posição, pois é sempre tangente aos círculos de base. Uma vez que ela é sempre normal à evolvente no ponto de contato, o requerimento de movimento uniforme é satisfeito.
P: ponto de tangência entre os círculos primitivos.
φ: ângulo de ação ou de pressão.

Engrenagens que se acoplam devem ter o mesmo módulo (ou “diametral pitch”) a fim de que os espaços entre os dentes sejam compatíveis. É fácil notar que, se as engrenagens não tiverem o mesmo passo circular, o primeiro dente entra em contato, mas o segundo já não mais se acoplará ao dente correspondente. Como o passo, por definição, é diretamente proporcional ao módulo, as engrenagens devem ter módulos iguais. O módulo pode ser entendido como uma medida indireta do tamanho do dente.


Figura6 (img7.jpg)

4.7. Módulos

Em todas engrenagens existe uma relação constante relacionando o número de dentes (Z) e o diâmetro primitivo (dp). No sistema métrico esta relação é chamada de módulo m (em milímetro) e no sistema inglês de passo diametral (número de dentes por polegada).
Módulos normalizados:
0,25
0,50
0,75
1
1,25
1,5
1,75
2
2,25
2,5
2,75
3
3,25
3,5
3,75
4
4
4,5
5
5,5
6
6,5
7









7
8
9
10
11
12
13
14
15
16







O módulo é a base do dimensionamento de engrenagens no sistema internacional. Duas engrenagens acopladas possuem o mesmo módulo. O módulo deve ser expresso em milímetros.
Lembre-se que módulo é uma simplificação da fórmula  do passo circular, ou seja dp1.π/z1 = dp2.π/z2 => dp1/z1 = dp2/z2 => m1 = m2
 
 
m = dp/z (constante)
m: módulo.
dp: diâmetro primitivo.
z: nº de dentes.

Os módulos são normalizados para permitir o maior intercâmbio de ferramentas de fabricação. Isso não significa que os módulos tenham que ser os recomendados, mas que é mais fácil encontrar ferramentas para confeccionar engrenagens com os seguintes módulos (em mm): 0,2 a 1,0 com incrementos de 0,1 mm; 1,0 a 4,0 com incrementos de 0,25; 4,0 a 5,0 com incrementos de 0,5 mm.

Condição da Engrenagem
Os cálculos são feitos apartir do diâmetro primitivo afim de garantir que o arco do vão e o arco do dente sejam iguais a metade do passo. O passo depende do diâmetro primitivo e do número de dentes. O número de dentes deve ser um número inteiro, pois não tem cabimento uma fração de dente.

Ao escolher um diâmetro primitivo não é qualquer módulo que servirá. Existe um módulo máximo quando as duas evolventes se cruzam na cabeça do dente e um módulo mínimo quando quando o raio interno é igual ao raio base (ri=rb) ou quando duas evolvente se interceptam no vão do dente. Para verificar essas possibilidades há necessidades de calcular a evolvente máxima θmax que se cruzam na cabeça do dente e a evolvente que se cruzam no pé do dente.

Esse assunto será tratado na etapa 9 quando a engrenagem será criada com a entrada do módulo e do diâmetro primitivo, além de que o cálculo das evolventes para tais circunstâncias depende de outros cálculos que ainda não foram abordados.
O objetivo nesse primeiro momento é cria uma engrenagem para assimilar suas propriedades principais e depois analisar todas as suas possibilidades de construção.

4.9. RAZÃO DE CONTATO
Situação em que o arco de ação seja exatamente igual ao passo circular, isto é:
qt = p
Isto significa que um dente e seu espaço irão ocupar o arco completo AB. Em outras palavras, quando um dente está justamente começando o contato em T1 , o dente anterior está, ao mesmo tempo, terminando o seu contato em T2.

Considere uma situação em que o arco de ação seja maior que o passo circular, isto é:
qt = 1,2p
Isto significa que quando um par de dentes está acabando de entrar em contato em T1, um outro par, ainda em contato, não terá ainda alcançado T2.
Por um curto período de tempo haverá dois dentes em contato, um na vizinhança de A e outro na de B.

Define-se razão de contato mc como:
mc = qt/p

Número que indica o número médio de pares de dentes em contato.
Em geral, usa-se, no mínimo, mc = 1,2 para evitar ruído e impacto.
mc = LT/p.cosφ

CONTINUIDADE DO ENGRENAMENTO
A continuidade do engrenamento diz respeito à quantidadede pares de dentes que está engrenada em simultâneo durante funcionamento de uma engrenagem. Assim, para que o engrenamento de duas rodas aconteça em boas condições, do ponto de vista da continuidade do engrenamento, é necessário que pelo menos um par de dentes esteja engrenado durante a transmissão do movimento (um dente de cada engrenagem). Por outras palavras, pode dizer-se que existe continuidade do engrenamento quando um par de dentes termina o seu engrenamento só após o par de dentes seguinte ter já iniciado o contacto. A situação limite, em que há apenas e só um par de dentes em contato, está representada na figura abaixo. 


Figura8 (img8.jpg)

A figura abaixo foi gerada na etapa10, considera-se apenas dois pontos de contato. Tais pontos são provenientes da engrenagem motora para a engrenagem movida. Os dois ponto de contato da engrenagem movida para a engrenagem motora não geram movimentos.

Engrenamento em que apenas há contato num par de dentes (um dente de cada engrenagem), o qual garante, teoricamente, a continuidade do engrenamento.
É sabido que no caso de engrenagens paralelas de dentes gerados em evolvente de círculo, a linha de ação ou linha de engrenamento é um segmento de reta, tal como se ilustra na figura8 acima. No âmbito do presente texto admite-se que o pinhão (engrenagem menor) ou carreto é a roda motora, enquanto a coroa (engrenagem maior) é a roda movida.
Deve ainda relembrar-se aqui que a linha de engrenamento é sempre tangente às circunferências
de base das duas rodas, passa pelo ponto de contato entre os círculos primitivos e faz um ângulo (ângulo de pressão) com a linha tangente às circunferências primitivas.

É evidente que cada dente de uma roda dentada está engrenado apenas uma vez em cada rotação
completa da roda. Este aspeto é fundamental no estabelecimento do número mínimo de dentes que uma roda dentada deve ter.
A linha de ação ou linha de engrenamento é, por definição, a linha que une as sucessivas posições
do ponto de contato de uma engrenagem.

Ordem lógica das medidas de uma engrenagem
1º) Começa pelo diâmentro primitivo, módulo e número de dentes afim de garantir um número inteiro de dentes e um arco no vão e no dente iguais.
2º) Cálculo do diâmetro de base (não precisa ser inteiro);
3º) Cálculo do passo e demais medidas;

4.11. Passo circular
É definido como a razão entre o perímetro da circunferência primitiva e o número de dentes.

Perímetro da circunferência: 2.π.rp ou dp.π

O passo é um arco de circunferência:
p = π.dp/z
Como m = dp/z (constante) => z= dp/m
p = π.dp/(dp/m)
p = π.m (arco de circunferência)

Ângulo do passo:
â= 2.π/z (em radianos)


O passo é diretamente proporcional ao modulo ou diretamente proporcional ao diâmetro primitivo e inversamente proporcional ao número de dentes.

p = e + s
s: espessura do dente no primitivo.
e: vão
Folga no vão: g = e - s
Folga na cabeça do dente: j

Mais a frente será calculado o arco no circulo de base, esse arco é chamado de giro e servirá para rotacionar a segunda evolvente do primeiro dente.

p = dp.π/z = db.cosσ.π/z

O passo depende do diâmentro primitivo e do número de dentes.
O passo depende do diâmetro de base, do número de dentes e do ângulo de pressão.

Vão dos dentes:
é a distância tomada em arco sobre o círculo primitivo entre dois flancos defrontantes de dentes consecutivos.
 
4.12. Passo Diametral

É a grandeza correspondente ao módulo no sistema inglês. É o número de dentes por polegada.

4.13. Altura da Cabeça do Dente ou Saliência
É a distância radial entre a circunferência primitiva e a circunferência da cabeça.
ha = m

4.14. Altura do pé ou Profundidade
É a distância radial entre a circunferência primitiva e a circunferência do pé.
hf = 1,25.m.
4.15. Altura total do dente

É a soma da altura do pé com a altura da cabeça, ou seja, ht=ha+ hd.
ha = m
hf = 1,25.m
hT = 2,25.m

O diâmetro interno di pode ser modificado aumentado com a diminuição de hf, ou diminuido com o aumento de hf. Porém, o dimensionamento do dente é feito para suportar certa força já previamente estipulada no projeto.

4.16. Largura do Dente
A recomendação para a largura do dente é que seja no mínimo 9 vezes o módulo e no máximo 14 vezes. Para o raio de concordância no pé do dente a recomendação é que seja de um terço do módulo.
Obs: concordância é a relação de tangência (ou continuidade) entre duas ou mais entidades geométricas.

4.17. Diâmetros Principais
Diâmetro primitivo: dp = m.z
Diâmetro de base: db = dp.cosφ
Diâmetro interno ou diâmetro de pé do dente:di = dp - 2.hf
Diâmetro externo ou diâmetro da cabeça do dente: dc = dp+2.hc

4.18. Tabela
Numero de dentes: z = dp/m (nº inteiro)
Módulo: m = dp/z = p/π
Passo: p= dp.π/z = m.π (arco)
Ângulo do passo: â = 2.π/z (radianos)
Espessura do dente no primitivo: s = p/2
Altura total do dente: hT = 2,25.m Altura da cabeça do dente: hc = m
Vão entre os dentes no primitivo: e = p/2 Altura do pé do dente: hf = 1,25.m
Folga da cabeça: j = 0,2.m Ângulo de pressão: φ = 20º

Comentário
O mais importante para a construção da engrenagem de dente reto é o círculo de base que gerará a evolvente porque é essa curva que possui a principal propriedade de uma engrenagem (os dentes giram um sobre o outro sem escorregar, sem gerar atrito, no acoplamento).
Porém, para que uma engrenagem possa acoplar em outra é necessário que ambas tenham o MESMO PASSO. Ou seja dp1.π/z1 = dp2.π/z2 => dp1/z1 = dp2/z2 => m1 = m2
Módulos iguais quer dizer passos iguais.
Começa-se a criação da engrenagem pela determinação de seu diâmetro primitivo e pelo número de dentes que deve ser sempre inteiro. Consequentemente ter-se-á assim um passo que dividirá o circulo primitivo em partes iguais.
O primeiro dente da engrenagem é criado com arco no primitivo igual a passo/2 e vão no primitivo igual a passo/2. Assim fica garantido o engrenamento entre duas engrenagens com o mesmo passo (ou mesmo módulo que é uma simplificação da fórmula do passo).

4.19. Desenho
Para facilitar o desenho foi escolhido o módulo igual a 10mm e número de dentes igua a 20.
Dados: m =10 e z = 20.
z = dp/m
20 = dp/10 => dp = 200mm

cos20º = db/200 => db = 0,939692620785908x200
db = 187,938524157182

ha = m => ha = 10mm (40px)
hf = 1,25.m => hf = 12,5mm (50px)
hT = 2,25.m => hT = 22,5mm (89px)
df = dp - 2.hf => df = 175mm (700px)
da = dp+2.ha => da = 220mm (880px)
p = 360º/z => p = 18º (0,3141592653 rad)
p = dp.π/z => p = 31,41592653mm
s = p/2 = 9°

Cálculo da Evolvente até a Cabeça do Dente
dc: diâmetro de cabeça = 220
db: diâmetro de base = 187,938524157182
rc = (dc/2) = 110
rb = (db/2) = 187,9385 = 93.96925
hT: altura da cabeça do dente = 22,5

Pelo triângulo retângulo OTP temos:
cosψ = rb/rc => acos(rb/rc) = ψ
θ = ev(ψ) = tgψ - ψ
Portanto a evolvente deve rotacionar ψ + θ para ser formada.

θ + ψ = tgψ


Em JavaScript:
Math.acos(93.96925/110) = 0.546659
ψ = Math.acos(rb/rc)
θ + ψ = Math.tan(0.546659) = 0.6085181
θ + ψ =  Math.tan( Math.acos(rb/rc))


θ + ψ = 0.6085181 rd (ângulo de rotação para formar a evolvente até a cabeça do dente)

Figura9 (evolvente7.jpg)

Evolvente1 em JavaScript (até a cabeça do dente)
ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=h + rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=k + rb*Math.sin(beta)-rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

Calculo do ângulo 2*β
Será feito apenas um furo para formar os dois chanfros do vão entre os dente. Devemos calcular o valor do ângulo β e o raio do furo. Depois é só criar um seguimento de reta tangente a evolvente e ao chanfro.
O β DA FIGURA BAIXO NÃO É O MESMO DA FÓRMULA DA EVOLVENTE.

Figura10 (furo.jpg)

A principal técnica utilizada é achar o ângulo 2*β que tangencia as duas evolvente no vão.
Através do ângulo 2*β podemos traçar um único círculo que tangencia o início das duas evolventes entre o vão.
Contudo para achar o comprimento x antes tem que fazer um círculo tangencial as duas evolventes do círculo exatamente no começo da evolvente. Esse círculo possui raio igual a re, é dito errado porque não tangencia o círculo do pé do dente (ou círculo interno), conforme figura abaixo.
O β DA FIGURA BAIXO NÃO É O MESMO DA FÓRMULA DA EVOLVENTE.


Figura11( evolvente12.jpg)

O PASSO
p NO CIRCULO PRIMITIVO É IGUAL AO PASSO p NO CIRCULO DE BASE.
giro é o ângulo do arco de base.
giro = p/2 + 2θ2
θ2: é a evolvente até o primitivo.
β: é utilizado para achar o ângulo do arco de chanfro
2β = (p/2 - 2θ2) => β = (p/2 - 2θ2)/2
ou
β = (p - giro)/2 (confira no desenho acima)

Em JavaScript:
var ψ2 = Math.acos(rb/rp);
θ2 = Math.tan(ψ2 ) - ψ2 ;
var β = (p/2 - 2*θ2)/2;

Cálculo do comprimento P1Po, re  e rie
A figura abaixo mostra o cálculo de rie e re para P1Po = 0,  porém vale para  P1Po > 0.
rie: é o raio errado do círculo do pé do dente, é errado porque pode ser maior, menor ou igual ao raio ri (verdadeiro).
re: é o raio do círculo de chanfro errado, é errado porque é tangente ao círculo do pé do dente errado.
O β DA FIGURA BAIXO NÃO É O MESMO DA FÓRMULA DA EVOLVENTE.


Figura12 (evolvente5a.jpg)

Existem três hipóteses para o comprimento de x:

O raio interno (ri) pode ser igual a di/2 = (dp - 2.hf)/2 ou menor. Se for maior que essa fórmula haverá diminuição da folga entre a cabeça de um dente com o vão da outra entrenagem no engrenamento.


Figura13 (evolvente5.jpg)

Se for diminuido o raio interno para fazer um só furo para conseguir dois chanfros isso não atrapalha no engrenamento.
Existem três hipóteses para o tamanho de x:
x = 0, neste caso rie = ri
x > 0, neste caso rie > ri. Quando isso ocorrer devemos deslocar o centro do chanfro em x para a esquerda para que fique tangente ao círculo interno certo.
x < 0, neste caso rie < ri. Quando isso ocorrer basta fazer ri = rie e x =0. Porque ri menor que di/2 não atrapalha o engrenamento. X deve ser igualado a zero para não atrapalhar os arcos. r deve ser igualado a re porque os arcos usam a variável r e não re.


Figura 14

Conforme figura acima:
tgβ = re/rb => re = rb.tgβ
senβ = re/(rie + re) => rie = re.(1-senβ)/senβ
senβ = r/(ri+r) => r = ri.senβ/(1- senβ)
cosβ = x/ (rie + re - ri -r) => x = cosβ.(rie +re - ri - r)

Em JavaScript
var re=rb*Math.tan(β);
var rie = re*(1- Math.sin(β))/Math.sin(β);

if(rie>=ri){
r=(ri*Math.sin(β))/(1-Math.sin(β));
x=Math.cos(β)*(rie-ri-r+re);
}else{
ri=rie;
r=re;
x=0;
}

Chanfro1 (sentido anti-horário)
Ângulo inicial: π/2
Ângulo final: π/2 + α
ctx.arc(rb, -r,r,Math.PI/2,(Math.PI/2)+Math.atan((rb-x)/r));

arquivo.html
Esse arquivo possui uma canvas e um botão para execução da função app6.func6().
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file6.js"></script>
</head>
<body>
<canvas id="c6" width="1000" height="1000"></canvas>
<botton style="border: 1px solid black;" onclick="app6.func6()">Clique aqui!</botton>
</body>
</html>

Arquivo externo javascript, file6.js
var app6 = {};
app6.func6=(function () {

var canvas = document.getElementById("c6");
var ctx = canvas.getContext("2d");
    ctx.translate(0, 1000);
    ctx.scale(1, -1);

var m=10;
var dp=200;
var z=dp/m;
var db = dp*Math.cos(20*Math.PI/180);
var p=(2*Math.PI)/z;
var hc = m;
var hf = 1.25*m;
var ht = hf+hc;
var di = dp-2*hf;
var dc = (dp+2*hc);

var rb = (db*4)/2;
var rc = (dc*4)/2;
var rp = (dp*4)/2;
var ri = (di*4)/2;


var step = 2*Math.PI/1100;
   
var h = 500;
var k = 500;

ctx.beginPath(); 
for(var beta=0;  beta < 2*Math.PI;  beta+=step){
  var x = h + (ri)*Math.cos(beta);
  var y = k - (ri)*Math.sin(beta);   
ctx.lineTo(x,y);
}
ctx.closePath();    
ctx.stroke();

ctx.beginPath(); 
for(var beta=0;  beta < 2*Math.PI;  beta+=step){
  var x = h + (rc)*Math.cos(beta);
  var y = k - (rc)*Math.sin(beta);   
ctx.lineTo(x,y);
}
ctx.closePath();    
ctx.stroke();


var ψ2 = Math.acos(rb/rp);
var θ2 = Math.tan(ψ2) - ψ2;
var giro = (p/2) + (2*θ2);

var ψ = Math.acos(rb/rc);
var θ = Math.tan(ψ) - ψ;

var β = (p/2 - 2*θ2)/2;
var re=rb*Math.tan(β);
var rie = re*(1- Math.sin(β))/Math.sin(β);

if(rie>=ri){
r=(ri*Math.sin(β))/(1-Math.sin(β));
x=Math.cos(β)*(rie-ri-r+re);
}else{
ri=rie;
r=re;
x=0;
}

ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=h + rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=k + rb*Math.sin(beta)-rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

ctx.beginPath();
ctx.moveTo(h+rb, k);
ctx.lineTo(h+rb-x, k);    
ctx.stroke();

ctx.beginPath();
ctx.arc(h+rb-x, k-r,r,Math.PI/2,(Math.PI/2)+Math.atan((rb-x)/r));  
ctx.stroke();
   
ctx.scale(1, -1);
});


Desenho


  Clique aqui!

Etapa5
Será feito o desenho da segunda evolvente e seu chanfro apartir da modificação do código da etapa anterior. Iremos construir a segunda evolvente com o código da primeira, porém será invertido o sinal das coordenadas do eixo-y (propriedade da simetria de gráficos), com isso as duas evolventes ficarão simétricas em relação ao eixo-x.
O chanfro2 será posicionado tangente a evolvente2 e ao círculo interno.

Devido a inversão do eixo-y com o método scale() para a conversão ao sistema de coordenadas cardesianas, a rotação padrão utilizando o método rotate() para a ser anti-horário.
O β DA FIGURA BAIXO NÃO É O MESMO DA FÓRMULA DA EVOLVENTE.

Figura15 (evolvente11.jpg)

arquivo.html
Esse arquivo possui uma canvas e um botão para execução da função app7.func7().
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file7.js"></script>
</head>
<body>
<canvas id="c7" width="1000" height="1000"></canvas>
<botton style="border: 1px solid black;" onclick="app7.func7()">Clique aqui!</botton>
</body>
</html>

Arquivo externo javascript, file7.js

Calculo da evolvente2
x4 e y4 são as coordenadas da evolvente2, o y4 da evolvente2 é igual ao y4 da evolvente1 multiplicado por -1, isso para inverter o giro da curvar da evolvente1.

ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=h + rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=k -rb*Math.sin(beta)+rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

O seguimento de reta tangente a evolvente2 e ao chanfro2 continua o mesmo da evolvente1, conforme figura 10:
ctx.beginPath();
ctx.moveTo(h+rb, k);
ctx.lineTo(h+rb-x, k);    
ctx.stroke();

O chanfro2 é obtido semelhantemente ao chanfro1, há mudança do centro, inicio e fim dos ângulos conforme figura 15, :
ctx.beginPath();
ctx.arc(h+rb-x, k+r,r,(Math.PI/2)+Math.atan((rb-x)/r),(3*Math.PI/2));  
ctx.stroke();

Outra opção mais simples é utilizar apenas um arco para os dois chanfros, isso equivale a multiplicar α por 2.
Chanfro1 (sentido anti-horário)
Ângulo inicial: π/2
Ângulo final: π/2 + 2*α
ctx.arc(rb, -r,r,Math.PI/2,(Math.PI/2)+(2*Math.atan((rb-x)/r)));


var app7 = {};
app7.func7=(function () {

var canvas = document.getElementById("c7");
var ctx = canvas.getContext("2d");
    ctx.translate(0, 1000);
    ctx.scale(1, -1);

var m=10;
var dp=200;
var z=dp/m;
var db = dp*Math.cos(20*Math.PI/180);
var p=(2*Math.PI)/z;
var hc = m;
var hf = 1.25*m;
var ht = hf+hc;
var di = dp-2*hf;
var dc = (dp+2*hc);

var rb = (db*4)/2;
var rc = (dc*4)/2;
var rp = (dp*4)/2;
var ri = (di*4)/2;


var step = 2*Math.PI/1100;
   
var h = 500;
var k = 500;

ctx.beginPath(); 
for(var beta=0;  beta < 2*Math.PI;  beta+=step){
  var x = h + (ri)*Math.cos(beta);
  var y = k - (ri)*Math.sin(beta);   
ctx.lineTo(x,y);
}
ctx.closePath();    
ctx.stroke();

ctx.beginPath(); 
for(var beta=0;  beta < 2*Math.PI;  beta+=step){
  var x = h + (rc)*Math.cos(beta);
  var y = k - (rc)*Math.sin(beta);   
ctx.lineTo(x,y);
}
ctx.closePath();    
ctx.stroke();


var ψ2 = Math.acos(rb/rp);
var θ2 = Math.tan(ψ2) - ψ2;
var giro = (p/2) + (2*θ2);

var ψ = Math.acos(rb/rc);
var θ = Math.tan(ψ) - ψ;

var β = (p/2 - 2*θ2)/2;
var re=rb*Math.tan(β);
var rie = re*(1- Math.sin(β))/Math.sin(β);

if(rie>=ri){
r=(ri*Math.sin(β))/(1-Math.sin(β));
x=Math.cos(β)*(rie-ri-r+re);
}else{
ri=rie;
r=re;
x=0;
}

ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=h + rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=k + rb*Math.sin(beta)-rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

ctx.beginPath();
ctx.moveTo(h+rb, k);
ctx.lineTo(h+rb-x, k);    
ctx.stroke();

ctx.beginPath();
ctx.arc(h+rb-x, k-r,r,Math.PI/2,(Math.PI/2)+Math.atan((rb-x)/r));  
ctx.stroke();

ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=h + rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=k -rb*Math.sin(beta)+rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

ctx.beginPath();
ctx.moveTo(h+rb, k);
ctx.lineTo(h+rb-x, k);    
ctx.stroke();

ctx.beginPath();
ctx.arc(h+rb-x, k+r,r,(Math.PI/2)+Math.atan((rb-x)/r),(3*Math.PI/2));  
ctx.stroke();
   
ctx.scale(1, -1);
   
});


Desenho
   

  Clique aqui!

Etapa6
Nesta etapa iremos rotacionar a segunda evolvente, para isso acontecer serão rotacionandos as suas coordenadas utilizando a propriedada da rotação de pontos.
O chanfro2 será posicionado junto a evolvente2 rotacionada. Para isso será rotacionado o seu centro e calculado seu ângulo inicial e final com base na rotação dos ângulos.

No código anterior a translação foi feita diretamente nas suas coordenadas com as variáveis h e k, essa translação deve ser mudada e ser feita com o método translate(500,500) porque esse método muda também a origem do sistema de coordenadas, isso não aconteçe com a translação feita diretamente nas coordenadas. Portanto deve excluir as variáveis h e k do código.
- A rotação é feita com base na origem do sistema de coordenadas (0,0), portanto, se quiser uma rotação em torno de outro pronto, primeiro deve fazer a translação da origem com o método translate(x,y) e depois usar o método rotate().

Cálculo da rotação dos ângulos
Será calculado o ângulo de giro do chanfro.


Figura16 (evolvente8.jpg)

O chanfro deverá girar um ângulo igual ao arco PoE, porém como a rotação positiva no sentido anti-horário, peceba que o cálculo para o ângulo inicial e final no chanfro tem como referência o centro do círculo de chanfro e não a origem do sistema de coordenadas.

Cálculo do Arco PoE
Arco PoE = ArcoPoC + ArcoCD + ArcoDE
ArcoPoC  = evolvente no ponto A
ArcoCD = Arco no primitivo = p/2
p = 360º/z => p = 18º (0,3141592653 rad)
p = 2*Math.PI/20 = Math.PI/10

ArcoCD = p/2 = 0,157079
ArcoCD = Math.PI/20

ArcoDE = ArcoPoC = θ2 = ev(ψ2) = tgψ2 - ψ2

Cálculo da evolvente no ponto A
d = 200
db: diâmetro de base = 187,938524157182
cosψ2 = rb/rp = 187,9385/200
Em JavaScript:
ψ2 = Math.acos(187,9385/200) = 0,349066
ψ2 = Math.acos(rb/rp) = 0,349066

Como: θ2 = tgψ2 - ψ2
θ2 = Math.tan( ψ2) - ψ2 = 0.36397 - 0.349066
=> θ2 = 0.01490463

giro = Arco PoE => giro = p/2 + 2*θ2
giro = Arco PoE = 0,157079 + 2 x 0.01490463 = 0.186888 rad

Cálculo da rotação das coordenadas da evolvente2:

Para posicionar a evolvente do ponto P2 no ponto P3 basta rotacionar seus pontos utilizando a propriedade de rotação de pontos.
.
Figura17 (rxy.png)

α:  ângulo inicial
α+θ : ângulo final

Função Trigonomética para Ângulo Agudo
Para α < 90º e P(x,y)
cos α = cateto adjacente/hipotenusa = x/r
sen α = cateto oposto/hipotenusa = y/r

Ponto P dado:
x = r.cosα   
y = r.senα

Ponto P' a ser achado em função de P:
 x' = r.cos(α+θ )  (I)
 y' = r.sen(α+θ )
(I) é válido tanto para soma de dois ângulos cuja resultado é menor que 90º quanto para uma soma que resulte em um ângulo qualquer.

A fórmula da soma de dois ângulos para o seno e cosseno não depende da posição dos pontos P e P', ou seja, não depende dos quadrantes onde estão.
 cos(α+θ ) = cosα.cosθ - senα.senθ   (II)
 sen(α+θ ) = senα.cosθ + cosα.senθ

x' = r.cosα.cosθ - r.senα.senθ   (III) obtido entre (I) e (II)
y' = r.cosα.senθ + r.senα.cosθ

Como
x = r.cosα   
y = r.senα

Coordenadas: (IV) obtido entre (I) e (III)

x' = x.cosθ - y.senθ
y' = x.senθ + y.cosθ 
Esta fórmula é válida para a rotação do ponto P(x,y) para qualquer quadrante, pois a fórmula do seno e cosseno não mudam.

Rotação da Evolvente2
x5 e y5 são as coordenadas rotacionadas da evolvente2, o ângulo inicial de giro é 0º e ângulo final de giro é giro (já calculado)

ctx.beginPath();
for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=-rb*Math.sin(beta)+rb*beta*Math.cos(beta);
     var x5=(x4*Math.cos(giro)) - (y4*Math.sin(giro));
     var y5=(x4*Math.sin(giro))+(y4*Math.cos(giro));
ctx.lineTo(x5,y5);
}
ctx.stroke();

Cálculo da Rotação do Chanfro2:
O β DA FIGURA BAIXO NÃO É O MESMO DA FÓRMULA DA EVOLVENTE.

Figura18 (evolvente9.jpg)

- Rotação do centro do chanfro2:
Rotacionar o centro C(rb,r)
var x6=((rb*Math.cos(giro)) - (r*Math.sin(giro));
var y6=(rb*Math.sin(giro))+(r*Math.cos(giro));

- Chanfro2: (anti-horário)
var α2 = Math.atan(y6/x6);

Ângulo inicial: Math.PI + α2
Ângulo final: 3*Math.PI/2+giro
Centro: (x6,y6)
- Portanto:
ctx.beginPath();
ctx.arc(x6,y6,r,Math.PI+α2, 3*Math.PI/2+giro);
ctx.stroke();

Cálculo da Rotação do Seguimento de Reta PoP1

Figura19 (giro2.jpg)

ctx.beginPath();
var x7=(rb*Math.cos(giro)) - (0*Math.sin(giro));
var y7=(rb*Math.sin(giro))+(0*Math.cos(giro));
ctx.moveTo(x7, y7);
var x8=(((rb-x)*Math.cos(giro)) - (0*Math.sin(giro)));
var y8=(((rb-x)*Math.sin(giro))+(0*Math.cos(giro)));
ctx.lineTo(x8, y8);    
ctx.stroke();

arquivo.html
Esse arquivo possui uma canvas e um botão para execução da função app8.func8().
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file8.js"></script>
</head>
<body>
<canvas id="c8" width="1000" height="1000"></canvas>
<botton style="border: 1px solid black;" onclick="app8.func8()">Clique aqui!</botton>
</body>
</html>


Arquivo file8.js
var app8 = {};
app8.func8=(function () {

var canvas = document.getElementById("c8");
var ctx = canvas.getContext("2d");
    ctx.translate(0, 1000);
    ctx.scale(1, -1);
    ctx.translate(500,500);

var m=10;
var dp=200;
var z=dp/m;
var db = dp*Math.cos(20*Math.PI/180);
var p=(2*Math.PI)/z;
var hc = m;
var hf = 1.25*m;
var ht = hf+hc;
var di = dp-2*hf;
var dc = (dp+2*hc);

var rb = (db*4)/2;
var rc = (dc*4)/2;
var rp = (dp*4)/2;
var ri = (di*4)/2;


var step = 2*Math.PI/1100;
   
ctx.beginPath(); 
for(var beta=0;  beta < 2*Math.PI;  beta+=step){
  var x = (ri)*Math.cos(beta);
  var y = (ri)*Math.sin(beta);   
ctx.lineTo(x,y);
}
ctx.closePath();    
ctx.stroke();

ctx.beginPath(); 
for(var beta=0;  beta < 2*Math.PI;  beta+=step){
  var x = (rc)*Math.cos(beta);
  var y = - (rc)*Math.sin(beta);   
ctx.lineTo(x,y);
}
ctx.closePath();    
ctx.stroke();


var ψ2 = Math.acos(rb/rp);
var θ2 = Math.tan(ψ2) - ψ2;
var giro = (p/2) + (2*θ2);

var ψ = Math.acos(rb/rc);
var θ = Math.tan(ψ) - ψ;

var β = (p/2 - 2*θ2)/2;
var re=rb*Math.tan(β);
var rie = re*(1- Math.sin(β))/Math.sin(β);

if(rie>=ri){
r=(ri*Math.sin(β))/(1-Math.sin(β));
x=Math.cos(β)*(rie-ri-r+re);
}else{
ri=rie;
r=re;
x=0;
}

ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=rb*Math.sin(beta)-rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

ctx.beginPath();
ctx.moveTo(rb,0);
ctx.lineTo(rb-x,0);    
ctx.stroke();

ctx.beginPath();
ctx.arc(rb-x,-r,r,Math.PI/2,(Math.PI/2)+Math.atan((rb-x)/r));  
ctx.stroke();



ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=-rb*Math.sin(beta)+rb*beta*Math.cos(beta);
     var x5=(x4*Math.cos(giro)) - (y4*Math.sin(giro));
     var y5=(x4*Math.sin(giro))+(y4*Math.cos(giro));
     ctx.lineTo(x5,y5);
}
ctx.stroke();

ctx.beginPath();
var x7=(rb*Math.cos(giro)) - (0*Math.sin(giro));
var y7=(rb*Math.sin(giro))+(0*Math.cos(giro));
ctx.moveTo(x7, y7);
var x8=(((rb-x)*Math.cos(giro)) - (0*Math.sin(giro)));
var y8=(((rb-x)*Math.sin(giro))+(0*Math.cos(giro)));
ctx.lineTo(x8, y8);    
ctx.stroke();


ctx.beginPath();
var x6=((rb-x)*Math.cos(giro)) - (r*Math.sin(giro));
var y6=((rb-x)*Math.sin(giro))+(r*Math.cos(giro));
var α2 = Math.atan(y6/x6);
ctx.arc(x6, y6,r,Math.PI+α2,3*Math.PI/2+giro,false);  
ctx.stroke();

ctx.scale(1, -1);
}); 


Desenho
   

  Clique aqui!

Etapa7
Para terminar um dente da engrenagem falta substituir a circunferência do pé do dente e a circunferência da cabeça do dente pelos respectivos arcos para depois rotacioná-los e assim criar mais dezessete (17) dentes com um lopp de repetição que cria a cada passo o conjunto de desenhos. Deve-se cirar primeiro o conjunto e arcos e evolventes destacados em vermelho na figura abaixo e depois aplicar a rotação.
Portanto com base no arquivo file.8 substituir as circunferencias de cabeça pelos respectivos arcos.
A circunferência do pé do dente será substituida pelos chanfros que a tangenciam.

A variável θ será usada para cálculo do arco de cabeça.
var ψ = Math.acos(rc/rb);
θ = Math.tan(ψ) - ψ;

A figura abaixo possui os ângulos a1, a2, a3 e a4 sobre a circunferência de base.
Com base na figura 9  a1 = θ
a4 refere-se a divisão de 360º pelo número de dentes = 18º (passo).


Figura20 (evolvente10.jpg)

Arco de cabeça (sentido anti-horário)

raio: é o raio de cabeça (rc).
Ângulo inicial : é igual a θ (função evolvente).    
var ψ = Math.acos(rb/rc);
θ = Math.tan(ψ) - ψ;
Ângulo final: é igual a a2.
a2 = a3 - θ
a3 = giro
a2 = giro- θ
ctx.arc(0,0,rc,θ,a2);
ctx.arc(0,0,rc, θ ,giro-θ);
  
arquivo.html
Esse arquivo possui uma canvas e um botão para execução da função app9.func9().
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file9.js"></script>
</head>
<body>
<canvas id="c9" width="1000" height="1000"></canvas>
<botton style="border: 1px solid black;" onclick="app9.func9()">Clique aqui!</botton>
</body>
</html>

Arquivo file9.js
var app9 = {};
app9.func9=(function () {
var canvas = document.getElementById("c9");
var ctx = canvas.getContext("2d");
    ctx.translate(0, 1000);
    ctx.scale(1, -1);
    ctx.translate(500,500);

var m=10;
var dp=200;
var z=dp/m;
var db = dp*Math.cos(20*Math.PI/180);
var p=(2*Math.PI)/z;
var hc = m;
var hf = 1.25*m;
var ht = hf+hc;
var di = dp-2*hf;
var dc = (dp+2*hc);

var rb = (db*4)/2;
var rc = (dc*4)/2;
var rp = (dp*4)/2;
var ri = (di*4)/2;

var step = 2*Math.PI/1100;

var ψ2 = Math.acos(rb/rp);
var θ2 = Math.tan(ψ2) - ψ2;
var giro = (p/2) + (2*θ2);

var ψ = Math.acos(rb/rc);
var θ = Math.tan(ψ) - ψ;

var β = (p/2 - 2*θ2)/2;
var re=rb*Math.tan(β);
var rie = re*(1- Math.sin(β))/Math.sin(β);

if(rie>=ri){
r=(ri*Math.sin(β))/(1-Math.sin(β));
x=Math.cos(β)*(rie-ri-r+re);
}else{
ri=rie;
r=re;
x=0;
}

ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=rb*Math.sin(beta)-rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

ctx.beginPath();
ctx.moveTo(rb,0);
ctx.lineTo(rb-x,0);    
ctx.stroke();

ctx.beginPath();
ctx.arc(rb-x,-r,r,Math.PI/2,(Math.PI/2)+Math.atan((rb-x)/r));  
ctx.stroke();


ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=-rb*Math.sin(beta)+rb*beta*Math.cos(beta);
     var x5=(x4*Math.cos(giro)) - (y4*Math.sin(giro));
     var y5=(x4*Math.sin(giro))+(y4*Math.cos(giro));
     ctx.lineTo(x5,y5);
}
ctx.stroke();

ctx.beginPath();
var x7=(rb*Math.cos(giro)) - (0*Math.sin(giro));
var y7=(rb*Math.sin(giro))+(0*Math.cos(giro));
ctx.moveTo(x7, y7);
var x8=(((rb-x)*Math.cos(giro)) - (0*Math.sin(giro)));
var y8=(((rb-x)*Math.sin(giro))+(0*Math.cos(giro)));
ctx.lineTo(x8, y8);    
ctx.stroke();


ctx.beginPath();
var x6=((rb-x)*Math.cos(giro)) - (r*Math.sin(giro));
var y6=((rb-x)*Math.sin(giro))+(r*Math.cos(giro));
var α2 = Math.atan(y6/x6);
ctx.arc(x6, y6,r,Math.PI+α2,3*Math.PI/2+giro,false);  
ctx.stroke();

ctx.beginPath();
ctx.arc(0,0,rc, θ ,giro-θ);
ctx.stroke();

ctx.scale(1, -1);

});


Desenho
   

  Clique aqui!

Obs:
giro = 0.18688
p = 0.31415

Etapa8
Falta apenas fazer um laço de repetição para que o desenho feito até aqui seja repetido a cada rotação igual ao passo.
...
for(i=0;i<=19;i=i+1){
...
ctx.rotate(p);
}
...

Esse arquivo possui uma canvas e um botão para execução da função app10.func10().
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file10.js"></script>
</head>
<body>
<canvas id="c10" width="1000" height="1000"></canvas>
<botton style="border: 1px solid black;" onclick="app10.func10()">Clique aqui!</botton>
</body>
</html>

Arquivo externo javascript, file10.js
var app10 = {};
app10.func10=(function () {
var canvas = document.getElementById("c10");
var ctx = canvas.getContext("2d");
    ctx.translate(0, 1000);
    ctx.scale(1, -1);
    ctx.translate(500,500);

var m=10;
var dp=200;
var z=dp/m;
var db = dp*Math.cos(20*Math.PI/180);
var p=(2*Math.PI)/z;
var hc = m;
var hf = 1.25*m;
var ht = hf+hc;
var di = dp-2*hf;
var dc = (dp+2*hc);

var rb = (db*4)/2;
var rc = (dc*4)/2;
var rp = (dp*4)/2;
var ri = (di*4)/2;


var step = 2*Math.PI/1100;


var ψ2 = Math.acos(rb/rp);
var θ2 = Math.tan(ψ2) - ψ2;
var giro = (p/2) + (2*θ2);

var ψ = Math.acos(rb/rc);
var θ = Math.tan(ψ) - ψ;

var β = (p/2 - 2*θ2)/2;
var re=rb*Math.tan(β);
var rie = re*(1- Math.sin(β))/Math.sin(β);

if(rie>=ri){
r=(ri*Math.sin(β))/(1-Math.sin(β));
x=Math.cos(rie+re-ri-r);
}else{
x=0;
r=(ri*Math.sin(β))/(1-Math.sin(β));
}

for(i=0;i<=19;i=i+1){

ctx.beginPath(); //evolvente 1
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=rb*Math.cos(beta)+rb*beta*Math.sin(beta);
     var y4=rb*Math.sin(beta)-rb*beta*Math.cos(beta);
     ctx.lineTo(x4,y4);
}
ctx.stroke();

ctx.beginPath();
ctx.moveTo(rb,0);
ctx.lineTo(rb-x,0);    
ctx.stroke();

ctx.beginPath(); // chandro da evolvente 1
ctx.arc(rb-x,-r,r,Math.PI/2,(Math.PI/2)+Math.atan((rb-x)/r));  
ctx.stroke();


ctx.beginPath();
 for(var beta=0;  beta <= Math.tan(Math.acos(rb/rc)) ;  beta+=step){
     var x4=rb*Math.cos(beta)+rb*beta*Math.sin(beta); //evolvente 2 igual a inversa da evolvente 1
     var y4=-rb*Math.sin(beta)+rb*beta*Math.cos(beta);// poderia ter outro nome, x4 e y4 foram sobrescritos
     var x5=(x4*Math.cos(giro)) - (y4*Math.sin(giro));// rotação da evovlente 2
     var y5=(x4*Math.sin(giro))+(y4*Math.cos(giro));
     ctx.lineTo(x5,y5);
}
ctx.stroke();

ctx.beginPath();// giro do seguimento de reta
var x7=(rb*Math.cos(giro)) - (0*Math.sin(giro));
var y7=(rb*Math.sin(giro))+(0*Math.cos(giro));
ctx.moveTo(x7, y7);
var x8=(((rb-x)*Math.cos(giro)) - (0*Math.sin(giro)));
var y8=(((rb-x)*Math.sin(giro))+(0*Math.cos(giro)));
ctx.lineTo(x8, y8);    
ctx.stroke();

ctx.beginPath();// giro do chanfro
var x6=((rb-x)*Math.cos(giro)) - (r*Math.sin(giro));
var y6=((rb-x)*Math.sin(giro))+(r*Math.cos(giro));
var α2 = Math.atan(y6/x6);
ctx.arc(x6, y6,r,Math.PI+α2,3*Math.PI/2+giro,false);  
ctx.stroke();

ctx.beginPath();
ctx.arc(0,0,rc, θ ,giro-θ); // arco da cabeça do dente
ctx.stroke();

ctx.rotate(p);
}


ctx.scale(1, -1);
});



Desenho

Clique aqui!

Discussão do Problema
A figura abaixo mostra uma possibilidade:

Figura22 (chanfro.jpg)