如何创建跨浏览器、JS 或 CSS、简单的圆和能够改变其半径和颜色的蜜蜂。
我不排除 .png 解决方案，但它必须是可定制的（尺寸为pixels，颜色为hex）。
IE7,8必须，IE6可选。
问问题
873 次
4 回答
4
使用像Raphael这样的库来制作圆圈怎么样。它是跨浏览器的，非常轻巧@ 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");
于 2012-12-20T13:59:48.957 回答
2
<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 或更低版本不支持这两种技术。
于 2012-12-20T13:52:12.653 回答
0
这是老歌，但很好。完全跨浏览器兼容，无需 SVG、Canvas 等：
http://codecorner.galanter.net/2008/01/16/dhtml-javascript-graphics-draw-without-flash/
于 2012-12-20T17:27:43.597 回答
-1
您还可以使用 font-face 创建任何形状：
此字体有一个圆圈：http
://www.fontriver.com/font/fnt_basic_shapes_1/
如果您希望它有边框，您可以将一个叠加在另一个之上。
于 2012-12-20T14:07:27.483 回答