Question

我正在尝试从左侧滚动到我的画布中。它确实有效，但它会删除最初加载到画布中的图像。我想这是因为animate方法重绘了画布？有什么方法可以让它保持形象吗？或者在动画期间画回来？或者我应该以某种方式有两层，这可能吗？我对画布知之甚少。

这是我的测试代码：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

imageObj = new Image;
imageObj.src = 'http://ncity.azurewebsites.net/img/world.jpg';

context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

$({ left: -200 }).animate({ left: 10 }, {duration: 5000, step: function(now, fx) {
    moveTextOnCanvas(now);
}});

function moveTextOnCanvas(val) {
    var c=document.getElementById("myCanvas");
    c.width = c.width;
    var ctx=c.getContext("2d");
    ctx.font="30px Verdana";
    ctx.fillStyle="#000000";
    ctx.fillText("Text!", val, 90);
}

Answer 1

试试这个......基于this answer @jimr

更新此HTML

<div style="position: relative;">
 <canvas id="myCanvas" width="300" height="150" 
   style="position: absolute; left: 0; top: 0; z-index: 0;border:1px solid #d3d3d3;"></canvas>
 <canvas id="myCanvasText" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Fiddle

您可以使用this plugin

加载图像时在画布上设置动画文本

1 个答案:

Fiddle