HTML5 캔버스 크기 및 해상도

이것을 보여주기 위해 간단한 예제를 작성했습니다.HTML5 캔버스 크기 및 해상도

캔버스의 크기는 500px * 400px입니다. 내 이미지의 원점 크기는 dpi가 480 인 200px * 160px입니다.이 이미지를 원점 크기로 캔바스에 표시하여 이미지의 크기가 조정되지 않도록하여 이미지를 흐리게 만듭니다.

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

원산지 이미지는 다음과 같습니다 :

200px * 160px

결과는 다음과 같습니다

코드의

나는 캔버스의 크기가 500 픽셀이기 때문에이 이상하다 생각 * 400px이고 이미지의 크기는 200px * 160px이며 이미지가 c 범위를 벗어납니다. anvas? 그리고 이미지 크기가 조정 된 것 같습니다.

원본 크기로 이미지를 표시하는 방법을 알고 싶습니다. 조언을 좀 해주세요. 감사! 대신 속성으로 캔버스 width 및 height를 추가

출처

2012-08-22 Ovilia

시도 : 1 내가 생각 :이 같은 뭔가를

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

이 캔버스에 그리기 가능 공간을 정의하고, 그렇지 않으면 기본 설정됩니다. .width()과 .height()을 사용하고 있지만 단위가없는 값을 설정하는 반면, 명시 적으로는 .attr() 인 픽셀로 정의하고 있습니다.

Example jsFiddle

출처

2012-08-22 09:25:55

를 사용! – Ovilia

당신이 캔버스 태그 width 및 height 속성을 추가하지 않습니다, 당신은 기본 width와 height 캔버스에 렌더링합니다. 및

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

이 태그는 단지이 코드로 확장됩니다.

그래서, 덕분에 아주 많이 <canvas id="canvas" width="500" height="400"></canvas>

사용 또는 $('#canvas').attr 기능이 작동

출처

2012-08-22 09:30:37

하지만 차이는 없습니다 :'' – Ovilia

HTML5 캔버스 크기 및 해상도

답변

관련 문제