如何在网站上生成图像？

Question

我正在试图弄清楚如何制作一个网站图片，只是一些小的颜色，而不是实际创建一个图像并放置一个图像标记和所有这些。可能吗？ 我会用CSS，Javascript还是HTML5绘制它？如果用Javascript之类的东西动态绘制它，这是一个好主意吗？一遍又一遍地画？ 不知道从哪里开始看？谢谢你的帮助。

以下是我想制作的图片示例：https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png

Answer 1

SVG是个不错的选择。它允许您使用与HTML相似的文档结构用于矢量图形。 <rect>元素构成一个矩形。对于像您的示例更复杂的形状，请查看路径。更多信息：Rounded corner only on one side of svg <rect>

矢量图形易于以编程方式生成和操作。它们的尺寸和比例也可以不受像素化影响。

如果您需要复杂的过滤或想要光栅图形，Canvas元素及其2D绘图上下文是一个不错的选择。