Question

我需要使用HTML5-Canvas，SVG，CSS等创建多个矢量形状

我知道我可以通过DIV和Z-index等实现这一目标，但我想找到使用矢量图形的解决方案，这样我就可以在运行时更新形状，颜色，位置。

除了制作大量的DIV并改变他们的z-index之外，我怎样才能让形状落后于其他一切？

看起来我到目前为止最接近的是使用svg并通过background-image加载它。

这是一张代表我想用CSS做什么的图片： enter image description here

Answer 1

您可以使用绝对定位的框上的border-radius组合（相对于视口或与某种包装元素相关）。你可以给他们一个低或负的z指数。透明度可以用rgba颜色完成。 E.g。

background: rgba(69,126,138,0.3);
border-radius: 15px;

以下是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.wrapper {
    background: rgba(162,200,208,0.2);
    width: 600px; 
    margin: 0 auto;
    position: relative;
    height: 400px; /* temp */
}

.box {
    background: rgba(69,126,138,0.3);
    position: absolute;
    z-index: -1;
}

.one {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    top: 30px;
    left: 30px;
}

.two {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    top: 90px;
    left: 90px;
}

</style>

</head>
<body>
    <div class="wrapper">
        <div class="box one"></div>
        <div class="box two"></div>
    </div>
</body>
</html>

Answer 2

此链接应该可以帮助您开始在HTML 5画布中创建圆角。

http://www.html5canvastutorials.com/tutorials/html5-canvas-rounded-corners/

它还允许您玩游戏并提出看起来像您的图像的解决方案。关于将其放在其他元素之后，将其余元素包装在div中并应用

    z-index: 10

到这个div（确保这是一个比应用于canvas元素的z-index更高的数字）。不要使用

    z-index: -1

因为这会在某些浏览器中造成严重破坏。

有关详细信息，请参阅此处：

An html5 canvas element in the background of my page?

显然，使用HTML5画布意味着您的网站不能完全向后兼容。

有关兼容性的信息，请参阅此处：

http://caniuse.com/#feat=canvas

N.B。我不能真正帮助你，因为我从未使用HTML 5画布。我个人认为这是一种过于复杂的呈现图像的方式，但我猜其他人对它有更实际的用途。

画背景的页面的矢量形状

2 个答案: