En este artículo, dibujaremos gráficos usando el elemento canvas en el documento. Esta etiqueta en HTML se usa para dibujar gráficos en una página web usando JavaScript. Se puede usar para dibujar rutas, cuadros, textos, gradientes y agregar imágenes. Por defecto, no contiene bordes ni texto.
Nota: esta etiqueta es nueva en HTML5.
Sintaxis:
<canvas id = "script"> Contents... </canvas>
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
How to Draw Graphics using
Canvas in HTML5 ?
</title>
<style>
#FirstCanvas {
width: 300px;
height: 300px;
border: 3px solid red;
background-color: blue;
}
</style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
How to Draw Graphics
using Canvas in HTML5?
</title>
</head>
<body>
<canvas id="geeks" height="200"
width="200" style=
"border:1px solid black">
</canvas>
<script>
var c = document.getElementById("geeks");
var cx = c.getContext("2d");
cx.beginPath();
cx.arc(100, 100, 90, 0, 2 * Math.PI);
cx.stroke();
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA