繪製矢量形狀爲

-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

繪製矢量形狀爲

回答

相關問題