当前位置：文江博客话题详情

具有“重放”功能的 HTML5 绘图特征”

发布于 2024-09-28 15:27:43 字数 96 浏览 2 评论 0原文

我正在尝试实现一个 html5 绘图应用程序。目前，我可以允许保存绘制的图像。我希望能够有一个重播功能，以与最初绘制图像相同的方式重新绘制图像，几乎就像是视频一样。有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

网名女生简单气质 2024-10-05 15:27:43

Canvas 没有 joni 所建议的 DOM 树。 Canvas 绘制像素，因此在绘制单个对象后您无法检索或移动它们。

您可以使用 canvas.getImageData() 将帧保存到数组中，然后使用 canvas.putImageData() 以相同的顺序恢复这些帧。虽然我不确定它在大画布尺寸下的表现如何。

样本：

// Start with an array where you'll save all frames.
var frames = [];

// Save the output of your canvas to the frames array. Do this every X seconds or X amount of drawing.
var frame = myCanvasElement.getImageData(0, 0, myCanvasElement.width, myCanvasElement.height);
frames.push(frame);

// When the user is done drawing, you can do a replay by restoring the frames one by one in a certain interval.
var fps = 15;
var i = 0;
var myInterval = setInterval(function()
{
    myCanvasElement.putImageData(frames[i], 0, 0);

    i++;
    if (i == frames.length)
    {
        // We've played all frames.
        clearInterval(myInterval);
    }
}, 1000 / fps);

Canvas doesn't have a DOM tree as joni suggests. Canvas draws pixels, so you cannot retrieve or move single objects after you've drawn them.

You could save a frame using canvas.getImageData() to an array, and then later restore these frames in the same order, using canvas.putImageData(). Although I'm not sure how well that performs with a big canvas size.

Sample:

// Start with an array where you'll save all frames.
var frames = [];

// Save the output of your canvas to the frames array. Do this every X seconds or X amount of drawing.
var frame = myCanvasElement.getImageData(0, 0, myCanvasElement.width, myCanvasElement.height);
frames.push(frame);

// When the user is done drawing, you can do a replay by restoring the frames one by one in a certain interval.
var fps = 15;
var i = 0;
var myInterval = setInterval(function()
{
    myCanvasElement.putImageData(frames[i], 0, 0);

    i++;
    if (i == frames.length)
    {
        // We've played all frames.
        clearInterval(myInterval);
    }
}, 1000 / fps);

回复收藏 0 原文