在畫布內繪製圖像的一部分

我有一個寬度爲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/

來源

2014-01-16 Sora

究竟你是什麼意思與「不工作」？它做什麼呢？ – Philipp

請看我的jsfiddle – Sora

您正在設置圖像的.src屬性並立即嘗試繪製它。這不起作用，因爲在該階段圖像尚未加載。設置src屬性時，圖像將在後臺加載，而代碼的其餘部分將繼續執行。在圖像加載之前，它被視爲空白。所以當你試圖繪製它時，你正在繪製一個空白圖像。要解決此問題，請將繪圖代碼移動到圖像的onload處理程序中。

此外，你的源圖像只有232px高，但你的源矩形是400px高。您無法定義部分位於源外部的源矩形。

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/

來源

2014-01-16 13:36:43 Philipp

很好!!!!謝謝 – Sora

在畫布內繪製圖像的一部分

回答

相關問題