Lienzo HTML5

 <Canvas id = MyCanvas Width = 400 Height = 200>

El lienzo de <Canvas> predeterminado muestra un rectángulo en blanco y sin borde en la página. Para que muestre el contorno, agregue un bisel punteado definiendo las reglas del estilo:

 Lienzo {border: 1px discontinano negro;}

Para completar la tarea de dibujo, en primer lugar, tenemos que obtener el objeto <VaTvas> y luego obtener su contexto de dibujo de dos dimensiones.

La siguiente demostración de muestra se obtiene mediante el dibujo del dibujo cuando la página está cargada:

 <script> window.onload = function () {var canvas = document.getElementById (mycanvas);

(1) El punto de partida está (50,50) por debajo (50,50), y el punto final es (150,150) líneas de línea recta

 context.moveto (50, 50);

(2) Establezca el ancho y el color de las líneas con atributos de anchura de línea y strokestyle

 // contextual de ancho. LineWidth = 10; 50);

(3) Establezca la forma de ambos extremos de la línea (tipo de cabeza de línea) con la propiedad Linecap:

1. Butt: Fangtou (valor predeterminado)
2. Ronda: cabeza redonda
3. Cuadrado: extensión de la cabeza cuadrada (el efecto es similar al trasero, pero la longitud de las dos líneas de la línea aumentará la longitud de la mitad del ancho de la línea)

 Var Canvas = Document.getElementById (MyCanVas); contextual de arranque.moveto (50, 50); ; context.linecap = square;

El ejemplo anterior puede ver que cada vez que se dibuja el nuevo segmento de línea, se llama el método BeginPath ().

Sin este paso, cada vez que llame a Stroke (), volverá a controlar el segmento de línea original en el lienzo. Especialmente como el ejemplo anterior, los atributos de contexto deben modificarse al dibujar una nueva línea.