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

时间:2012-12-20 13:49:42

标签: javascript jquery html css

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

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

IE7,8必须是,IE6可选。

4 个答案:

答案 0 :(得分:4)

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

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

以下是主页上的a simple circle example

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

答案 1 :(得分: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

答案 2 :(得分:0)

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

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

答案 3 :(得分:-1)

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

http://caniuse.com/fontface