Javascript 如何创建非图像跨浏览器圆

如何创建跨浏览器，JS或CSS，简单的圆和being能够改变其半径和颜色

我不排除.png解决方案，但它必须是可压缩的（大小以像素为单位，颜色以十六进制为单位）

IE7,8必须是可选的，IE6是可选的。

：

但是，请注意，IE8或更低版本不支持这两种技术

---

使用一个类似于圆的库如何。它是跨浏览器的，并且非常轻@89Kb。它对兼容浏览器使用SVG，对IE使用VML

Raphaël目前支持Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+和Internet Explorer 6.0+

如主页所示：

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

---

您还可以使用字体面创建任何形状：
此字体有一个圆圈：
如果您希望它有一个边框，可以将一个边框覆盖在另一个边框上

---

这是老话，但很好。完全跨浏览器兼容，无需SVG、画布等：

---

你知道PNG是图像，对吧？是的。它不应该是基于图像的，但是如果它可以并且仍然可以被压缩，这是可以的。你可以通过Canvas实现这一点，但它可能与IE不兼容。o在所有浏览器中都可以工作吗？我尝试过css Behavior属性，但它不起作用。问题是需要IE 7支持。IE在版本9之前不支持SVG。Canvas也是IE 9+。老实说，我怀疑IE 8是否有一个选项——最好是调用一个生成画布的页面，然后将其保存为base64。base64然后作为AJAX发送到服务器，服务器可能（以某种方式）读取它并将其存储在.png文件中，然后在显示给用户的页面中调用该文件？@Ghilled:是的，php可以做到这一点。我更喜欢Raphaël，就像另一个答案中建议的那样，因为这样就不需要额外的服务器调用。当然，我不知道Raphael似乎是最好的答案。@user1576183是的，它在DOM中。

<canvas id="canvas" width="400" height="400"></canvas>

//get the canvas' context.
var c = document.getElementById('canvas').getContext("2d");

// Draw canvas outline
c.fillStyle="blue";
c.fillRect(0,0,200,200);
c.fillStyle="#fff";
c.fillRect(2,2,200- 4,200- 4);

//draw the circle
c.fillStyle="#f00";
c.beginPath();
c.arc(100, 100, 50, 0, Math.PI*2, true); 
c.closePath();
c.fill();

c.lineWidth = 10;
c.strokeStyle = '#00f';
c.stroke();

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");