HTML5 Tamaño de la lona y resolución

Escribí un ejemplo simple para mostrar esto.HTML5 Tamaño de la lona y resolución

El tamaño del lienzo es 500px * 400px. El tamaño del origen de mi imagen es 200px * 160px con dpi de 480. Quiero mostrar esta imagen en el lienzo con el tamaño de origen para que no se cambie de tamaño, lo que borrará la imagen.

Aquí está el código:

imagen Origen

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#canvas").width(500); 
      $("#canvas").height(400); 

      var canvas = $("#canvas").get(0); 
      var ctx = canvas.getContext('2d'); 

      var image = new Image(); 
      image.src = "fish01.png"; // size is 200px * 160px 

      ctx.drawImage(image, 0, 0); // same with ctx.drawImage(image, 0, 0, 200, 160); 
     }); 
    </script> 
</head> 

<body style="background-color: #ccc; margin: 0px;"> 
    <canvas id="canvas" style="background-color: #66c"></canvas> 
</body> 
</html>

es:

200px * 160px

El resultado es: enter image description here

creo que esto es extraño, ya que el tamaño del lienzo es 500px * 400px y el tamaño de la imagen es 200px * 160px, ¿cómo sería la imagen fuera del rango de la c anvas? Y parece que la imagen ha sido redimensionada.

Quiero saber cómo mostrar la imagen con el tamaño del origen. Por favor, da un consejo. ¡Gracias!

Fuente

2012-08-22 Ovilia

Trate de añadir el lienzo width y height como atributos en su lugar:

$("#canvas").attr("width", "500px"); 
$("#canvas").attr("height", "400px");

Esto define el espacio dibujable en el lienzo, de lo contrario, por defecto a algo así como 2: 1 que pienso. Sé que estás usando .width() y .height(), pero establecen un valor sin unidades, mientras que lo definimos explícitamente como píxeles con .attr().

Example jsFiddle

Fuente

2012-08-22 09:25:55

Funciona, gracias mucho! – Ovilia

Cuando no se agrega width y height atributos a la etiqueta de la lona, entonces renderiza sobre lienzo con defecto width y height. Y

$("#canvas").width(500); 
$("#canvas").height(400);

just stretch by css this tag.

Así que utilice <canvas id="canvas" width="500" height="400"></canvas>

O utilice la función $('#canvas').attr

Fuente

2012-08-22 09:30:37

Pero esto no hará ninguna diferencia: '' – Ovilia

HTML5 Tamaño de la lona y resolución

Respuesta

Cuestiones relacionadas