2013-05-18 5 views
0

아래 스크립트는 캔버스에 전체 이미지를 그리지 않습니다. 크롬, 사파리 HTML5 Canvas API

<html> 
<head> 
</head> 
<body> 
    <script type="text/javascript">  
    var canvas = null; 
    function init() { 
     var cvs = document.createElement("canvas"); 
     cvs.id = "myCanvas"; 
     var ctx = cvs.getContext('2d'); 
     var originX = 200; 
     var originY = 173; 
     document.body.appendChild(cvs); 
     var img = new Image(); 
     img.onload = function() { 
      var sourceX = 1200; 
      var sourceY = 0; 
      var sourceWidth = 400; 
      var sourceHeight = 346; 
      var destinationX = 0; 
      var destinationY = 0; 
      var destinationWidth = 400; 
      var destinationHeight = 346; 
      ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 
          destinationX, destinationY, destinationWidth, destinationHeight); 
     }; 
     img.src = 'tiles.png'; 
    }; 

    init(); 
</script> 
</body>  
친절하게 도와 Mozilla에서 sprite.Tested에서 400 * 346 픽셀의 화상을 그리려.

+0

오류가 어디에서 오는지 당신은 어떻게 생각하십니까 같은

를 추가해보십시오 무엇인가? 콘솔에 오류 메시지가 표시됩니까? 로깅 작업을 시도해 본 결과가 예상 한 결과인지 확인해 봤습니까? 여기에 코드 한 장을 던지거나 다른 사람들에게 코드를 작동 시키라고하지 마십시오. – m90

+0

나는 시도했다 ... 코드는 잘 동작한다. 오류 메시지가 없습니다. 그러나 스프라이트에서 전체 이미지를 그려 내지는 않습니다. 권한이 충분하지 않아 '평판이 충분하지 않아 이미지를 업로드 할 수 없습니다.' 또한 스프라이트의 각 이미지는 400 * 346 픽셀입니다. –

+0

고정 ... cvs.setAttribute ('width', '1000'); cvs.setAttribute ('height', '1000'); 여기서 cvs는 컨텍스트가 아닌 캔버스 객체입니다. -MS –

답변

2

캔버스에 너비 또는 높이를 지정하지 마십시오. 따라서 기본적으로 300x150으로 이미지보다 작으므로 이미지의 일부만 표시됩니다. cvs.width = 400; cvs.height = 346;

+0

완벽했습니다. 감사 –