L'introduzione di HTML5 ha portato con sé il supporto per l'elemento di "tela", che consente agli sviluppatori di creare forme dinamiche 2D e immagini in pagine HTML standard bitmap utilizzando JavaScript. In particolare, questo nuovo elemento supporta curve sotto forma di archi di cerchio. Per creare una forma, deve innanzitutto definire un elemento canvas, tirare le sue proprietà in JavaScript e quindi impostare le proprietà dell'arco necessarie visualizzare nel modo che ti sarebbe piaciuto per la curva.

Istruzioni

1

Creare una tela tra tag "body" della pagina e assegnare un ID:

< tela id = "esempio-tela" >< / tela >

2

Creare una funzione JavaScript tra i tag di "testa" della tua pagina che carica all'avvio:

< script type = "text/javascript" >
Window. onLoad = function)
{
};
< / script >

3

Inizializzare la tela utilizzando il "getElementById" e "getContext" metodi, come pure due variabili:

var my_canvas = document.getElementById("canvas-example");
var my_canvas_content = my_canvas.getContext("2d");

4

Cinque variabili di dichiarare e assegnare loro i valori in base al centro x e y coordinate del cerchio, il raggio del cerchio, la curva iniziale angolo e l'angolo finale della 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

Creare il percorso curva inserendo le variabili dichiarate nel metodo "arc":

my_canvas_content.Arc (starting_x_coordinate, starting_y_coordinate, curve_radius, curve_starting_angle, curve_ending_angle);

6

Assegnare la curva una larghezza e il colore utilizzando le proprietà "lineWidth" e "strokeStyle":

my_canvas_content.LineWidth = 15;
my_canvas_content.strokeStyle = "black"

7

Disegnare la curva utilizzando il metodo di "corsa":

my_canvas_content.Stroke();