Literally Canvas - 設置畫布圖像

Question

我想爲Literally Canvas窗口小部件設置畫布爲圖像，類似於使用下面的代碼，但似乎沒有任何API在執行此操作。有任何想法嗎？我不能在literally.js文件中使用下面的代碼...

imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0); 
}; 
imageObj.src = '<?php echo $path . $image_name; ?>'; 

編輯：

代碼，我現在有（見下面的評論）：

$(document).ready(function() { 
    $('.literally').literallycanvas(); 
    var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'); 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0); 
    }; 
    imageObj.src = '<?php echo $path . $image_name; ?>'; 

請注意，我沒有在literallycanvas.js文件中使用此代碼，並且我沒有修改該文件。我應該在那裏使用代碼嗎？如果是這樣，Javascript文件中的PHP代碼應該如何更改爲PHP文件？

Answer 1

它應該工作。你應該得到畫布第一的背景下...

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'); 
var imageObj = new Image(); 
imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0); 
}; 
imageObj.src = '<?php echo $path . $image_name; ?>'; 

我測試了它字面上畫布本身的例子頁面上，並且它的正常工作。

Answer 2

一個適用於很多人的簡單解決方案是將背景設置爲透明並在畫布後面放置圖像。

var myLC = $('.literally').literallycanvas({backgroundColor: 'transparent'}); 

您可以通過繪製到「緩衝區上下文」來準確實現您的想法。你必須編輯「LiterallyCanvas.prototype.repaint」功能，這樣做：

var img = new Image(); 
img.src = "photo.jpg"; 

this.bufferCtx.drawImage(img, 90, 0, 269, 336); 

我刪除檢查「drawBackground」布爾型中頻但我不能完全肯定這是必要的。使用這種技術，圖像將不會顯示，直到你開始繪畫。這是你如何從extrnal JS訪問緩衝區上下文的方式。

myLC[0].literallycanvas.bufferCtx.drawImage(img, 90, 0, 269, 336); 

請注意，我沒有測試過這個性能，但它似乎工作得很好。

Answer 3

該文檔現在有幾個與添加圖像相關的示例，特別是關於將它們用作背景的示例。

http://literallycanvas.com/examples/index.html