varios - reproducir videos javascript
Mala calidad para el 100% del ancho y la altura del lienzo (2)
He hecho un pequeño ejemplo con canvas, está disponible en JsFiddle :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#myCanvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById( "myCanvas" );
var context = canvas.getContext( "2d" );
context.id = "myContext";
context.beginPath();
context.arc( 95, 50, 40, 0, 2 * Math.PI );
context.stroke();
setTimeout( function() {
var rectWidth = 150;
var rectHeight = 75;
context.fillStyle = "blue";
context.fillRect( rectWidth / -2, rectHeight / -2, rectWidth, rectHeight );
}, 2000 );
</script>
</body>
</html>
Como puede ver, el resultado de la representación tiene una calidad muy baja:
Entonces, me pregunto, ¿cómo puedo dibujar varias figuras utilizando Canvas en una buena calidad, no quiero dibujar en tamaño pequeño, quiero dibujar en el 100% del tamaño de la página.
Entonces, ¿quizás no definí algún filtro anti aliasing o algo más?
¡Gracias!
El alto y el ancho deben establecerse en los atributos de alto y ancho de la etiqueta canvas y no en CSS. Cualquier tamaño de CSS del elemento canvas simplemente estira el lienzo y no lo dimensiona correctamente.
<canvas id="canvas" width="500px" height="500px">
Eche un vistazo a este proyecto que publiqué en mi sitio: Creación de una aplicación de pintura HTML5
Incluye una función para cambiar el tamaño del lienzo cuando cambia el tamaño de la ventana del navegador (que debe modificar) :
this.onScreenSizeChanged = function (forceResize) {
if (forceResize || (this.canvas.width != window.innerWidth /*||
this.canvas.height != window.innerHeight*/)) {
var image = this.context.getImageData(0, 0,
this.canvas.width, this.canvas.height);
this.canvas.width = (window.innerWidth);
this.canvas.height = (window.innerHeight);
this.context.putImageData(image, 0, 0);
}
}
this.onScreenSizeChanged(true);
Problema
En la mayoría de los casos, deberíamos evitar el uso de CSS para establecer el tamaño del lienzo.
El tamaño predeterminado del lienzo es 300 x 150 píxeles (mapa de bits). Si configura el tamaño con CSS, acabaremos escalando esos 300 x 150 píxeles, lo que significa que el navegador comenzará a interpolar y suavizar la imagen, por lo que termina con un resultado borroso.
Solución
Quítelos de la regla CSS:
#myCanvas {
/*width: 100%;
height: 100%;*/
display: block;
}
y establece el tamaño en JavaScript de esta manera:
var canvas = document.getElementById( "myCanvas" );
canvas.width = window.innerWidth; // equals window dimension
canvas.height = window.innerHeight;
Por supuesto, puede establecer cualquier otro tamaño que necesite (en píxeles). Es probable que desee definir la posición (es decir, fija o absoluta) para el canvas ''CSS también si su objetivo es el tamaño completo de la ventana.
Espero que esto ayude.