HTML5 Canvas绘制一堆可调整大小的图形的最佳方法

问题描述 投票:0回答:1

我目前正在使用一些随机生成的曲线图为我的网站创建一些附庸风雅的背景。

Demo

到目前为止,我正在使用Html5 Canvas,每次调整窗口大小以适应画布的新宽度时,我都会重新创建整个图像。数据全部位于x,y〜[0,1],[0,1]中,然后进行缩放以适合窗口。这就是我设置画布转换的方式:

ctx.resetTransform();
ctx.translate(c.width / 2, 0);
ctx.scale(c.width, c.height);
ctx.translate(-0.5, 0);

由于基本数据不变,我希望我可以调整画布大小(删除所有数据)并进行变换以更新绘图(尽管我猜想在笔触宽度时可能会遇到笔触宽度方面的麻烦[0,1]空间中的行)。对我来说,有没有更有效的方式来重绘所有这些图(例如以某种方式存储所有线路径),还是我真的必须再次遍历所有内容并重新创建整个场景?

javascript optimization plot graph html5-canvas
1个回答
0
投票

由于数据不会改变,为什么不使用svg而不是先将所有数据保存在某个位置并编写大量逻辑以将其绘制在画布上。

[有些网站可将您的图像转换为svg。您所需要做的就是进行一些看起来最适合您的更改,然后就完成了。

某些示例:Trajan column

© www.soinside.com 2019 - 2024. All rights reserved.