L'introduzione di HTML5 ha portato con sé il supporto per l'elemento "tela", che consente agli sviluppatori di creare forme 2D dinamici e immagini bitmap in pagine HTML standard utilizzando JavaScript. In particolare, questo nuovo elemento supporta curve in forma di archi di cerchio. Per creare una tale forma, è necessario innanzitutto definire un elemento canvas, tirare le sue proprietà in JavaScript e quindi impostare le proprietà dei dell'arco necessari per la curva per visualizzare il modo in cui si vorrebbe che.

istruzione

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

<Canvas id = "tela-example"> </ canvas>

2 Creare una funzione JavaScript tra i tag "testa" della pagina che viene caricata all'avvio:

<Script type = "text / javascript">
window.onload = function ()
{
};
</ Script>

3 Inizializzare la tela con il "getElementById" e metodi "getContext", oltre a due variabili:

var my_canvas = document.getElementById ( "tele-example");
var = my_canvas_content my_canvas.getContext ( "2D");

4 Dichiarare cinque variabili e assegnare loro i valori in base al centro coordinate x e y del cerchio, raggio del cerchio, l'angolo di partenza della curva 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 curvo inserendo le variabili dichiarate nel metodo "arco":

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

6 Assegnare la curva di larghezza e colore utilizzando la proprietà "strokeStyle" "lineWidth" e:

my_canvas_content.lineWidth = 15;
my_canvas_content.strokeStyle = "nero"

7 Tracciare la curva utilizzando il metodo "colpo":

my_canvas_content.stroke ();