HTML Canvas

O <canvas> elemento HTML é usado para desenhar gráficos, dinamicamente, via JavaScript.

O <canvas> elemento é apenas um contêiner para gráficos. Você precisa usar JavaScript para desenhar os gráficos.

O Canvas tem vários métodos para desenhar caminhos, caixas, círculos, texto e adicionar imagens.

O Canvas é suportado por todos os principais navegadores.

Uma tela é uma área retangular em uma página HTML. Por padrão, uma tela não tem bordas nem conteúdo.

A marcação se parece com isso:

Observação: Sempre especifique um atributo id (a ser referenciado em um script) e um atributo width e um atributo height para definir o tamanho da tela. Para adicionar uma borda, use o atributo style.

Exemplo 1

Arquivo index.php.

Arquivo js/script.js.

Index.php no navegador.

Adicionar uma válvula on-off e o estado de seu comando Fechar (0 = vermelho).

Adicionar dois botões para abrir e fechar a válvula on-off.

Exemplo 2

Arquivo index.php.

Arquivo style.css.

Arquivo js/screen.js.

Arquivo js/valve.js.

Index.php no navegador.