0

我想将 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 文件？

4

3 回答 3

1

一个可能适用于许多人的简单解决方案是将背景设置为透明并将图像放在画布后面。

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，但我不完全确定这是必要的。使用这种技术，在您开始绘制之前不会显示图像。这就是您从外部 JS 访问缓冲区上下文的方式。

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

请注意，我没有对此进行性能测试，但它似乎工作得很好。

于 2013-07-06T17:44:19.720 回答
0

它应该工作。您应该首先获取画布的上下文...

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 本身的示例页面上对其进行了测试，并且运行良好。

于 2013-03-15T09:29:02.330 回答
0

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

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

于 2013-11-25T17:03:17.567 回答