Question

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

我不排除.png解决方案，但它必须是可用的（pixels大小，hex中的颜色）。

IE7,8必须是，IE6可选。

Answer 1

如何使用像Raphael这样的库制作圆圈。它是跨浏览器，非常轻便@ 89Kb。它将SVG用于兼容的浏览器，将VML用于IE。

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");

Answer 2

With SVG：

<svg width="200" height="200" viewBox="0 0 200 200"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
    <desc>Example circle01 - circle filled with red and stroked with blue</desc>

    <!-- Show outline of canvas using 'rect' element -->
    <rect x="1" y="1" width="198" height="198"
        fill="none" stroke="blue" stroke-width="2"/>

    <circle cx="100" cy="100" r="50"
        fill="red" stroke="blue" stroke-width="10"  />
</svg>

或使用HTML5的canvas：

<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();

但请注意，IE 8或更低版本不支持这两种技术。

<强> Working Sample

Answer 3

这是老人，但是好东西。完全跨浏览器compatinle，无需SVG，Canvas等：

http://codecorner.galanter.net/2008/01/16/dhtml-javascript-graphics-draw-without-flash/

Answer 4

您还可以使用font-face创建任何形状：
这个字体有一个圆圈：http://www.fontriver.com/font/fnt_basic_shapes_1/
如果你想要它有一个边框，你可以将一个叠加在另一个上面。

http://caniuse.com/fontface

如何创建非图像跨浏览器圈

4 个答案: