El elemento canvas es parte de HTML 5 y permite la representación de formas 2D e imágenes de mapa de bits (también llamadas «ráster»).
Un lienzo en realidad tiene dos tamaños:
- el tamaño del elemento.
- el tamaño de la superficie de dibujo del elemento.
Los atributos de ancho y alto del elemento establecen tanto el tamaño del elemento como el tamaño de la superficie de dibujo del elemento. Los atributos CSS solo afectan el tamaño del elemento y no la superficie de dibujo.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<p>Image:</p>
<img id="forest" width="220" height="277" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
alt="Forest">
<p>Canvas:</p>
<canvas id="Canvas" width="300" height="200"
style="border:15px solid #000066;">
Your browser not support the HTML5 canvas .
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("Canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("forest");
context.drawImage(img, 12, 8);
};
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por himanshushinde0410 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA