videos varios seguidos reproducir pausar elemento detener controles con camara javascript html5 canvas filter drawing

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 :

http://jsfiddle.net/yPtr5/

<!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.