Question

我正在开发一个C＃聊天客户端，在发送消息时需要有一个发送图标。由于我的程序的性质，图标不能是图像。所有消息都显示在不断修改的Web浏览器控件中。有没有办法画一个可以稍微改变颜色或大小的圆圈而不依赖于html5 / canvas，或类似flash / java。我无法保证客户端计算机上将存在任何这些框架。

Answer 1

Unicode包含一个圆圈（●），因此它的行为类似于文本元素。你可以调整它的大小并相应地着色。这也适用于旧浏览器。

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

Answer 2

是的，你可以。只需使用<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;
}

Answer 3

多米尼克的方法将起作用，另一种方法是使用像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更容易制作动画

Answer 4

使用一些智能技巧，您可以使用纯CSS来绘制简单的表单：请参阅css poligons

Answer 5

正如其他人所提到的，可以使用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/

有没有办法在没有画布的浏览器中使用javascript绘制简单的形状？

5 个答案: