绘制矢量形状为

-5

页

的背景下，我需要使用HTML5的画布，SVG，CSS创建多个矢量形状等等绘制矢量形状为

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

除了制作大量的DIV和改变它们的z-index之外，我怎样才能获得形状背后的一切？

它看起来像我目前看到的最接近的是使用svg并通过背景图像加载它。

这里是代表什么，我想用CSS做一个形象： enter image description here

来源

2013-05-07 fred1234

您有问题要问？或者只是要求某人为你编码？ – tnw 2013-05-07 14:59:41

对不起，我以问题的形式更新了它。 – fred1234 2013-05-07 15:06:11

你在想[背景]（http://www.w3schools.com/css/css_background.asp）...？或者，除了网页的外观外，这些形状还具有某种功能吗？ – tnw 2013-05-07 15:07:35

此链接应该让你开始有关于在HTML 5的画布创建圆角。

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

它也将让你玩，并拿出看起来像你的形象的解决方案。至于然后把这个落后于其他元素，包裹你的其余元件在一个div和应用

z-index: 10

到这个div（确保这是比施加到canvas元素的z-index的一个较大的数字）。不要使用

z-index: -1

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

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

看到这里的信息关于兼容性：

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

注：因为我从未使用过HTML 5画布，所以我无法真正帮助您。我个人认为这是一种呈现图像的过于复杂的方式，但我想其他人对此有更实际的用途。

来源

2013-05-07 15:50:57 jezzipin

可以对正在绝对定位框边框半径的组合做到这一点（无论是相对于视或与某种包装元素的关系）。你可以给他们一个低或负Z指数。透明度可以用rgba颜色完成。例如。

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>

来源

2013-05-07 15:08:52

谢谢，但我要求一个解决方案不使用一堆的div – fred1234 2013-05-07 15:09:56

那么你打算如何将CSS样式应用到...？ – tnw 2013-05-07 15:14:23

我有一个包装div身体等 – fred1234 2013-05-07 15:16:59

绘制矢量形状为

回答

相关问题