HTML5画布API

下面的脚本没有在画布上绘制完整的图像。试图从sprite.Tested绘制400 * 346像素的图片，铬，Safari浏览器，Mozilla的HTML5画布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>

请帮助。

来源

2013-05-18 ms ghotra

您认为错误来自哪里？你在控制台中看到错误消息吗？你是否尝试过记录事情，看他们的输出是否与你期望的一样。不要只是在这里扔一段代码，并告诉别人让它工作。 – m90

我试过...代码工作正常。没有错误信息。但它不会从精灵画出完整的图像。由于权限不足，没有足够的声誉，我无法上传图片。精灵中的每个图像都是400 * 346像素。 –

固定它... cvs.setAttribute（'width'，'1000'）; cvs.setAttribute（'height'，'1000'）; 其中cvs是画布对象而不是上下文。 -MS –

您不分配画布宽度或高度。因此它默认为300x150，比图像小，因此只显示图像的一部分。

尝试添加类似于cvs.width = 400; cvs.height = 346;

来源

2013-05-18 13:35:57 AshleysBrain

完美的工作。谢谢 –

HTML5画布API

回答

相关问题