有沒有一種方法可以在沒有畫布的瀏覽器中使用JavaScript繪製簡單形狀？

我正在開發一個C＃聊天客戶端，當消息發送時需要有發送圖標。由於我的程序的性質，圖標不能成爲圖像。所有消息均顯示在不斷修改的Web瀏覽器控件中。有沒有什麼辦法可以繪製一個可以改變顏色或大小的圓圈，而不需要依賴html5/canvas或者flash/java之類的東西。我不能保證在客戶端計算機上會存在任何這些框架。有沒有一種方法可以在沒有畫布的瀏覽器中使用JavaScript繪製簡單形狀？

來源

2011-12-20 Nathan Tornquist

的Unicode包含一個圓（●），所以它會像一個文本元素。您可以調整它的大小並相應地着色。這也適用於舊版瀏覽器。

http://www.fileformat.info/info/unicode/char/25cf/index.htm

來源

2011-12-20 14:59:27

是的，你可以。只需使用<div>元素並對其進行設計即可。具有相同圓角的正方形變爲圓形。

檢查了這一點：http://jsfiddle.net/E4B5p/

.circle { 
    moz-border-radius: 200px; 
    -webkit-border-radius: 200px; 
    -khtml-border-radius: 200px; 
    border-radius: 200px; 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #000; 
    margin: 20px; 
    height: 100px; 
    width: 100px; 
}

來源

2011-12-20 14:58:40

Dominic的方法將工作，另一個途徑是使用類似SVG。

**<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" 
    stroke-width="2" fill="red"/> 
    </svg> **

兩個都不錯，SVG更容易動畫，如果你幻想着

來源

2011-12-20 15:04:27

可以純CSS繪製簡單的形式，使用一些聰明的技巧：看css poligons

來源

2011-12-20 15:08:26

正如其他人所說，圓可以使用CSS3繪製。通過定義類你的圈子中很容易使用JavaScript來更改圓的性質，像這樣：

<style type="text/css"> 
.circle {width:4px; height:4px; border-radius:4px; border:2px solid green; background:green;} 
.red {border: 2px solid red; background-color:red;} 
</style> 

<div id="target" class="circle" onclick="document.getElementById('target').className += ' red';"></div>

注意，沒有到目前爲止所提供的解決方案，在IE的支持。要在IE中支持CSS圈子，您需要使用類似餅圖的庫： http://css3pie.com/

來源

2011-12-20 15:09:10 Condiment

有沒有一種方法可以在沒有畫布的瀏覽器中使用JavaScript繪製簡單形狀？

回答

相關問題