Tela HTML5

 <canvas id = myCanvas largura = 400 altura = 200>

A tela padrão <Canvas> exibe um retângulo em branco e sem fronteiras na página. Para fazê -lo exibir o contorno, adicione uma moldura pontilhada a ele, definindo as regras do estilo:

 Canvas {Border: 1px Branched Black;}

Para concluir a tarefa de desenho, antes de tudo, temos que obter o objeto <lievas> e, em seguida, obter seu contexto de desenho bilimensional.

A demonstração da amostra a seguir é obtida pelo desenho do desenho quando a página é carregada:

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

(1) O ponto de partida está (50,50) abaixo (50,50), e o ponto final é (150.150) linhas de linha reta

 context.moveto (50, 50);

(2) Defina a largura e a cor das linhas com atributos de largura de linha e estrio

 // largura de linha contexto.LineWidth = 10; 50); contexto.Lineto (150, 150);

(3) Defina a forma das duas extremidades da linha (tipo de cabeça de linha) com a propriedade LineCap:

1. Butt: Fangtou (valor padrão)
2. Redonda: cabeça redonda
3. Quadrado: estendendo a cabeça quadrada (o efeito é semelhante ao bumbum, mas o comprimento das duas linhas da linha aumentará o comprimento da metade da largura da linha)

 Var Canvas = Document.getElementById (mycanvas); lateral Tore Context.Moveto (50, 50); Context.Linete (250, 100); context.LineCap = Square;

O exemplo acima pode ver que toda vez que o novo segmento de linha é desenhado, o método BeginPath () é chamado.

Sem esta etapa, toda vez que você chama Stroke (), você re -arranhará o segmento de linha original na tela. Especialmente como o exemplo acima, os atributos de contexto devem ser modificados ao desenhar uma nova linha.