La etiqueta <canvas> en HTML se usa para dibujar gráficos en una página web usando JavaScript. Se puede usar para dibujar rutas, cuadros, textos, degradados y agregar imágenes. Por defecto, no contiene bordes ni texto.
Nota: la etiqueta <canvas> es nueva en HTML5.
Sintaxis:
<canvas id = "script"> Contents... </canvas>
Atributos: la etiqueta acepta dos atributos, como se mencionó anteriormente y se describe a continuación.
- altura : este atributo se utiliza para establecer la altura del lienzo.
- ancho : este atributo se utiliza para establecer el ancho del lienzo.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <!-- canvas Tag starts here --> <canvas id = "GeeksforGeeks" width = "200" height = "100" style = "border:1px solid black"> </canvas> <!-- canvas Tag ends here --> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<!-- HTML code to illustrate canvas tag -->
<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:
Ejemplo 3:
HTML
<!DOCTYPE html>
<html>
<body>
<!-- canvas tag starts here -->
<canvas id = "geeks" width = "200" height = "200"
style = "border:1px solid black">
</canvas>
<!-- canvas tag ends here -->
<script>
var c=document.getElementById("geeks");
var cx = c.getContext("2d");
var grd = cx.createRadialGradient(100,
100, 5, 100, 100, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "green");
cx.fillStyle = grd;
cx.fillRect(0, 0, 200, 200);
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1.0 y superior
- Borde 12.0 y superior
- Internet Explorer 9.0 y superior
- Firefox 1.5 y superior
- Ópera 9.0 y superior
- Safari 2.0 y superior
Publicación traducida automáticamente
Artículo escrito por sheyakhare1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA