A introdução do HTML5 trouxe consigo suporte para o elemento " canvas " , que permite aos desenvolvedores criar formas 2D dinâmicos e imagens bitmap em páginas HTML padrão usando JavaScript. Em particular , este novo elemento de suporte curvas em forma de arcos de círculo . Para criar tal forma , você deve primeiro definir um elemento de tela , puxe suas propriedades em JavaScript e , em seguida, configurar as propriedades do arco necessário para a curva para mostrar a maneira que você gostaria que ele . Instruções
1

Criar uma tela entre as tags "corpo" da página e atribuir-lhe um ID:

2

Crie uma função JavaScript entre a "cabeça " tags de sua página que carrega na inicialização :

3

Inicializar a tela usando o " getElementById " e métodos " getContext " , bem como duas variáveis ​​:

var my_canvas = document.getElementById ( "tela - exemplo "); var my_canvas_content = my_canvas.getContext ( "2d" );
4

Declare cinco variáveis ​​e atribuir-lhes valores com base na centro x e y coordenadas do círculo, o raio do círculo, ângulo inicial da curva e ângulo terminando da curva :

var starting_x_coordinate = 200 ; var starting_y_coordinate = 160 ; var curve_radius = 70 ; var curve_starting_angle = 1.0 * Math.PI ; var curve_ending_angle = 1.9 * Math.PI ;
5

Crie o caminho curva , inserindo as variáveis ​​declaradas dentro do método "arco" :

my_canvas_content . arco ( starting_x_coordinate , starting_y_coordinate , curve_radius , curve_starting_angle , curve_ending_angle );
6

Atribuir a curva de largura e cor usando o " 'lineWidth " e " propriedades" strokeStyle :

my_canvas_content.lineWidth = 15; my_canvas_content.strokeStyle = " preto "
7

Desenhe a curva usando o método de "stroke " :

my_canvas_content.stroke (); < br >