mirror of
https://gitlab.com/tutorial-java-rafa-munoz/tutorial-java-2024-25/LMSGI-2024-25.git
synced 2025-11-09 18:03:06 +01:00
47 lines
1.3 KiB
HTML
47 lines
1.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>HTML5 Canvas example</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<script>
|
|
function drawPicture(){
|
|
|
|
// Primero se recupera el objeto canvas a modificar
|
|
var canvas = document.getElementById('example');
|
|
|
|
// Luego se le indicar la forma de trabajar 2D o 3D
|
|
var context = canvas.getContext('2d');
|
|
|
|
// Se comienza a dibujar en el lienzo utilizando objetos
|
|
// gráficos
|
|
|
|
context.fillStyle = "rgb(0,255,0)";
|
|
context.fillRect (25, 25, 100, 100);
|
|
|
|
context.fillStyle = "rgba(255,0,0, 0.6)";
|
|
context.beginPath();
|
|
context.arc(125,100,50,0,Math.PI*2,true);
|
|
context.fill();
|
|
|
|
context.fillStyle = "rgba(0,0,255,0.6)";
|
|
context.beginPath();
|
|
context.moveTo(125,100);
|
|
context.lineTo(175,50);
|
|
context.lineTo(225,150);
|
|
context.fill();
|
|
|
|
}
|
|
</script>
|
|
<style type="text/css">
|
|
canvas { border: 2px solid black; }
|
|
</style>
|
|
</head>
|
|
<body onload="drawPicture();">
|
|
|
|
<canvas id="example" width="260" height="200">
|
|
Este texto se muestra en el caso de que el navegador no soporte el elemento "canvas".
|
|
</canvas>
|
|
|
|
</body>
|
|
</html>
|