Canvas HTML, utiliza el elemento <canvas> para dibujar gráficos a través de JavaScript. Canvas tiene varios métodos para dibujar rutas. Canvas es compatible con todos los navegadores principales.Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.
Atributos
width
La anchura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 300.
height
La altura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 150.
Sobre Accesibilidad
El elemento <canvas> es simplemente un bitman que no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta canvas no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.
A primera vista, un elemento <canvas> es parecido al elemento <img>, con la diferencia que este no tiene los atributos src y alt. El elemento <canvas>tiene solo dos atributos – width y height. Ambos son opcionales y pueden ser definidos usando propiedades.
El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.
Contenido alternativo
El elemento <canvas> se diferencia de un tag <img> en que, como los elementos <video>, <audio> o <picture>, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.
EJEMPLOS DE CANVAS HTML
Métodos básicos de dibujo
El contexto 2D del canvas HTML ofrece una variedad de métodos para dibujar formas, líneas y texto. Aquí tienes algunos de los más utilizados:
- fillRect (x, y, width, height): Dibuja un rectángulo relleno.
- strokeRect (x, y, width, height): Dibuja solo el contorno de un rectángulo.
- clearRect (x, y, width, height): Borra una sección del canvas.
- beginPath () y closePath (): Inicia y cierra un nuevo camino de dibujo.
- moveTo (x, y) y lineTo (x, y): Dibuja una línea desde un punto inicial a otro.
Vamos a ver ahora un código HTML de Canvas:
<html>
<head><title>Ejemplo canvas de w3.org curso JavaScript aprenderaprogramar.com </title><head>
<body>
<h1> Ejemplo canvas curso JavaScript aprenderaprogramar.com </h1>
<canvas id="canvasGlowing" width="800" height="450">
El navegador no admite canvas</canvas>
</body>
<script>
var canvas = document.getElementById('canvasGlowing');
var context = canvas.getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 150);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 140);
</script>
</html>Vamos a ver ahora el código y la demo de un efecto constelación, realizado con Canvas HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<title>constelation</title>
<link rel="canonical" href="https://codepen.io/Dan-Silva-the-vuer/pen/QWeRowo">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
canvas{
width: 100%;
height: 100%;
border: 1px solid black;
background-color: black;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<canvas>
</canvas>
<script id="rendered-js" >
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Ball {
constructor(x, y, speed, radius) {
this.x = x;
this.y = y;
this.speedX = speed;
this.speedY = speed;
this.radius = radius;
this.colorBall = this.color();
}
color() {
return `rgba(255,20,205,${Math.random() * .9 + .1})`;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.colorBall;
ctx.fill();
ctx.closePath();
}
moveBall() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
this.speedX = -this.speedX;
}
if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
this.speedY = -this.speedY;
}
}
colision(ball) {
ball.forEach(ball => {
const ballx = ball.x - this.x;
const bally = ball.y - this.y;
const distance = Math.sqrt(ballx * ballx + bally * bally);
if (distance / 10 < ball.radius + this.radius) {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(ball.x, ball.y);
ctx.strokeStyle = this.colorBall;
ctx.lineWidth = 0.8;
ctx.stroke();
}
});
}}
class workspace {
constructor() {
this.balls = [];
this.mouseX = 0;
this.mouseY = 0;
canvas.addEventListener("mousemove", e => this.mouseMove(e));
}
mouseMove(e) {
this.mouseX = e.clientX;
this.mouseY = e.clientY;
this.balls.forEach(ball => {
const ballx = this.mouseX - ball.x;
const bally = this.mouseY - ball.y;
const distance = Math.sqrt(ballx * ballx + bally * bally);
if (distance < ball.radius + 100) {
ball.speedX = -ballx / 100;
ball.speedY = -bally / 100;
}
});
}
drawLine() {
this.balls.forEach(ball => {
const ballx = this.mouseX - ball.x;
const bally = this.mouseY - ball.y;
const distance = Math.sqrt(ballx * ballx + bally * bally);
if (distance / 1 < ball.radius + 100) {
ctx.beginPath();
ctx.moveTo(this.mouseX, this.mouseY);
ctx.lineTo(ball.x, ball.y);
ctx.strokeStyle = ball.colorBall;
ctx.lineWidth = 0.8;
ctx.stroke();
}
});
}
makeBalls() {
for (let i = 0; i < 200; i++) {
this.balls.push(
new Ball(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 1 + 0.2,
Math.random() * 3 + 0.2));
}
}
clearBoard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
update() {
this.clearBoard();
this.balls.forEach(ball => {
ball.draw();
ball.moveBall();
ball.colision(this.balls);
});
this.drawLine();
requestAnimationFrame(() => this.update());
}}
addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
const game = new workspace();
game.makeBalls();
game.update();
//# sourceURL=pen.js
</script>
</body>
</html>Por último vamos a ver la magia de un ejemplo más complejo realizado con HTML:
Título de que Color es la Calabaza
Si hacemos click en la calabacear nos abrirá un elenco de colores con los que interactuar.
