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; ?>';

我在Literally Canvas本身的示例页面上进行了测试，它运行正常。

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'布尔值的IF，但我不完全确定这是必要的。使用此技术，在开始绘图之前，图像不会显示。这是您从extrnal JS访问缓冲区上下文的方法。

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

请注意，我没有对性能进行测试，但似乎效果很好。

Answer 3

文档现在有几个与添加图像有关的示例，特别是关于将它们用作背景。

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

Literally Canvas - 设置画布图像

3 个答案: