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