Recursos C2D
Referências
- Norma em HTML Canvas 2D Context e WHATWG - HTML Living Standard.
- Documentação em Mozilla Developer Network.
- Tutorial em Mozilla Developer Network.
Modelos
Para documentos «pequenos», por exemplo, para testar uma função ou técnica, pode usar um único documento HTML com o código gráfico incluído.
Porém, se está a fazer um modelo gráfico mais complexo, deve separar o documento HTML do código JavaScript em vários ficheiros .
Um documento «standalone>
O código
JavaScriptestá incluído no documentoHTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function main() {
let gc = document
.getElementById("acanvas")
.getContext("2d");
gc.fillStyle = "steelblue";
gc.fillRect(0,0,256,256);
}
</script>
</head>
<body>
<canvas id="acanvas">
<script>main();</script>
</canvas>
</body>
</html>
Código e Documento separados
O código
JavaScriptestá separado do documentoHTML.
Ficheiro HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="prog.js">
</script>
</head>
<body>
<canvas id="c2d:canvas"></canvas>
<script>main("c2d:canvas");</script>
</body>
</html>
Ficheiro prog.js com código JavaScript:
function main(target_id) {
let gc = document
.getElementById(target_id)
.getContext("2d");
gc.fillStyle = "steelblue";
gc.fillRect(0,0,256,256);
}