Question

我有一个宽度= 400且高度= 400的画布和一个宽度= 3392且高度= 232的图像。我想要做什么裁剪这个图像的前400像素并在画布内绘制它们我怎么能这样做？

$(document).ready(function () {
    var ctx = $("#MyCanvas")[0].getContext("2d"); // the "context" of the canvas that will be used (2D or 3D)
    var cw = 400; // width of the rectangular area
    var ch = 400; // height of the rectangular area
    var FieldImg= new Image(); // Image to be loaded and drawn on canvas
    var ImgNumb = 12; // Number of images that make up the movement
    var Fps = 30;
    init();
    function init() {
        FieldImg.src = "images/Spritebackground.png";
         ctx.drawImage(FieldImg, 0, 0, 400, 400, 0, 0, 400, 400); 
    }
});

ctx.drawImage(FieldImg, 0, 0, 400, 400, 0, 0, 400, 400);此行不起作用？这是我的jsfiddle：http://jsfiddle.net/seekpunk/3uhgN/

Answer 1

您正在设置图像的.src属性并立即尝试绘制它。这不起作用，因为在那个阶段图像尚未加载。设置src-attribute时，图像将在后台加载，而其余代码将继续执行。在图像加载之前，它被视为空白。因此，当您尝试绘制它时，您正在绘制一个空白图像。要解决此问题，请将绘图代码移动到图像的onload-handler中。

此外，您的源图像仅为232px高，但源矩形高400像素。您无法定义部分位于源之外的源矩形。

 FieldImg.onload = function() {
      ctx.drawImage(FieldImg,0, 0, 400, 232,0, 0, 400, 400);
 }
 FieldImg.src = "images/Spritebackground.png";

这是更新后的JSFiddle：http://jsfiddle.net/jA93t/1/

在画布中绘制图像的一部分

1 个答案: