2013-05-18 5 views
0

Ниже сценария не рисует полное изображение на холсте. Попытка сделать 400 * 346 пикс из sprite.Tested хромом, сафари, MOZILLAHTML5 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>  

Пожалуйста, помогите.

+0

Как вы думаете, где ошибка происходит от? Вы видите сообщения об ошибках в консоли? Вы пробовали регистрировать вещи, чтобы узнать, является ли их результат тем, что вы ожидаете. Не просто бросайте кусок кода и говорите другим людям, чтобы он работал. – m90

+0

Я пробовал ... код работает нормально. Нет сообщения об ошибке. Но он не рисует полное изображение из спрайта. я не могу загружать изображение из-за недостаточных привилегий «недостаточно репутации». Также каждое изображение в спрайте составляет 400 * 346 px. –

+0

Исправлено ... cvs.setAttribute ('width', '1000'); cvs.setAttribute ('height', '1000'); где cvs - это объект canvas, а не контекст. -MS –

ответ

2

Вы не назначаете холст ширину или высоту. Поэтому по умолчанию он равен 300x150, что меньше вашего изображения, поэтому отображается только часть изображения.

Попробуйте добавить что-то вроде cvs.width = 400; cvs.height = 346;

+0

отлично работает. благодаря –