{"id":261,"date":"2024-05-21T10:12:29","date_gmt":"2024-05-21T08:12:29","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=261"},"modified":"2024-05-21T10:12:30","modified_gmt":"2024-05-21T08:12:30","slug":"58-api-canvas","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/58-api-canvas\/","title":{"rendered":"58. API Canvas"},"content":{"rendered":"\n

El elemento HTML <canvas><\/em><\/strong> se utiliza para dibujar gr\u00e1ficos en una p\u00e1gina web.<\/p>\n\n\n\n

Que es Canvas?<\/h2>\n\n\n\n

El elemento HTML <canvas><\/em><\/strong> se utiliza para dibujar gr\u00e1ficos, sobre la marcha, a trav\u00e9s de JavaScript<\/strong>. El elemento <canvas><\/em><\/strong> es solo un contenedor de gr\u00e1ficos. Debes usar JavaScript<\/strong> para dibujar los gr\u00e1ficos. Canvas<\/strong> tiene varios m\u00e9todos para dibujar rutas, cuadros, c\u00edrculos, texto y agregar im\u00e1genes.<\/p>\n\n\n\n

Ejemplos con Canvas<\/h2>\n\n\n\n

Un Canvas<\/strong> es un \u00e1rea rectangular en una p\u00e1gina HTML. De forma predeterminada, un lienzo no tiene borde ni contenido.<\/p>\n\n\n\n

El marcado se ve as\u00ed:<\/p>\n\n\n\n

<canvas id=\"myCanvas\" width=\"200\" height=\"100\"><\/canvas><\/pre>\n\n\n\n
\n
Nota<\/strong>: Especifica siempre un atributo de identificaci\u00f3n (al que se har\u00e1 referencia en un script) y un atributo de ancho y alto para definir el tama\u00f1o del lienzo. Para agregar un borde, use el atributo de estilo.<\/p>\n<\/blockquote>\n\n\n\n
Aqu\u00ed hay un ejemplo de un lienzo b\u00e1sico y vac\u00edo.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #000000;\">\n<\/canvas><\/pre>\n\n\n\n
A\u00f1adir Javascript<\/h2>\n\n\n\n
Despu\u00e9s de crear el \u00e1rea del lienzo rectangular, debes agregar un JavaScript<\/strong> para hacer el dibujo.<\/p>\n\n\n\n
Aqu\u00ed hay unos ejemplos:<\/p>\n\n\n\n
Dibujar una l\u00ednea<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\nYour browser does not support the HTML canvas tag.<\/canvas>\n\n<script>\nlet c = document.getElementById(\"myCanvas\");\nlet ctx = c.getContext(\"2d\");\nctx.moveTo(0,0);\nctx.lineTo(200,100);\nctx.stroke();\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Dibujar un c\u00edrculo<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\nYour browser does not support the HTML canvas tag.<\/canvas>\n\n<script>\nlet c = document.getElementById(\"myCanvas\");\nlet ctx = c.getContext(\"2d\");\nctx.beginPath();\nctx.arc(95,50,40,0,2*Math.PI);\nctx.stroke();\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Dibujar un texto<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\nYour browser does not support the HTML canvas tag.<\/canvas>\n\n<script>\nlet c = document.getElementById(\"myCanvas\");\nlet ctx = c.getContext(\"2d\");\nctx.font = \"30px Arial\";\nctx.fillText(\"Hello World\",10,50);\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Texto en negrita<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\nYour browser does not support the HTML canvas tag.<\/canvas>\n\n<script>\nlet c = document.getElementById(\"myCanvas\");\nlet ctx = c.getContext(\"2d\");\nctx.font = \"30px Arial\";\nctx.strokeText(\"Hello World\",10,50);\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Dibujar un gradiente lineal<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\nYour browser does not support the HTML canvas tag.<\/canvas>\n\n<script>\nlet c = document.getElementById(\"myCanvas\");\nlet ctx = c.getContext(\"2d\");\n\/\/ Create gradient\nvar grd = ctx.createLinearGradient(0,0,200,0);\ngrd.addColorStop(0,\"red\");\ngrd.addColorStop(1,\"white\");\n\/\/ Fill with gradient\nctx.fillStyle = grd;\nctx.fillRect(10,10,150,80);\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Dibujar un gradiente circular<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\nYour browser does not support the HTML canvas tag.<\/canvas>\n\n<script>\nlet c = document.getElementById(\"myCanvas\");\nlet ctx = c.getContext(\"2d\");\n\n\/\/ Create gradient\nlet grd = ctx.createRadialGradient(75,50,5,90,60,100);\ngrd.addColorStop(0,\"red\");\ngrd.addColorStop(1,\"white\");\n\n\/\/ Fill with gradient\nctx.fillStyle = grd;\nctx.fillRect(10,10,150,80);\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Dibujar una imagen<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<p>Image to use:<\/p>\n<img id=\"scream\" src=\"img_the_scream.jpg\" alt=\"The Scream\" width=\"220\" height=\"277\">\n\n<p>Canvas to fill:<\/p>\n<canvas id=\"myCanvas\" width=\"250\" height=\"300\"\nstyle=\"border:1px solid #d3d3d3;\">\nYour browser does not support the HTML canvas tag.<\/canvas>\n\n<p><button onclick=\"myCanvas()\">Try it<\/button><\/p>\n\n<script>\nfunction myCanvas() {\nlet c = document.getElementById(\"myCanvas\");\nlet ctx = c.getContext(\"2d\");\nvar img = document.getElementById(\"scream\");\nctx.drawImage(img,10,10);\n}\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
El elemento HTML <canvas> se utiliza para dibujar gr\u00e1ficos en una p\u00e1gina web. Que es Canvas? El elemento HTML <canvas> se utiliza…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":57,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-261","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"El elemento HTML <canvas> se utiliza para dibujar gr\u00e1ficos en una p\u00e1gina web. Que es Canvas? El elemento HTML <canvas> se utiliza...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/261\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/261\/revisions\/263"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}