求高效的js画圆代码
 |
fuyun
2009-05-11
如题:
1.实心圆; 2.空心圆; 3.有背景图片填充的圆. 实现者,献  一个...嘿嘿~...
ps.画圆么,不难,本人已实现(除背景图片的那个),但效率还真不敢恭维哈...尤其是在圆半径大于200px的时候...故求,高效的圆代码... |
 |
kimmking
2009-05-12
svg或是vml
|
|
fuyun
2009-05-12
kimmking 写道 svg或是vml
多谢2楼... 昨日曾看到一篇技术贴,用的就是svg,可惜昨天还不知道这个...今天你提示了,特意上Google搜索了一下. 非常感激...嘻嘻~现在兑现承诺,献 一个给你...
贴一下,昨天搜到的svg画圆代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head><title>javascript画圆</title></head>
<body>
<div id="svg" style="width:200px;height:200px;"> </div>
<script type="text/javascript">
var cont;
var circle=new Function();
if (document.createElementNS) {
svgNS = "http://www.w3.org/2000/svg";
svg = document.createElementNS(svgNS, "svg");
SVG = (svg.x != null);
createSVGVML = function(o, antialias) {
cont = document.createElementNS(svgNS, "svg");
o.appendChild(cont);
svgAntialias = antialias;
}
circle = function(diam, color) {
var o = document.createElementNS(svgNS, "circle");
o.setAttribute("shape-rendering", false);
o.setAttribute("stroke-width", "2px");
o.setAttribute("stroke-color", color);
o.setAttribute("r", Math.round(diam / 2));
o.setAttribute("cx", (diam / 2+2)+"px");
o.setAttribute("cy", (diam / 2+2)+"px");
o.setAttribute("stroke", color);
o.setAttribute("fill", "none");
o.style.cursor = "pointer";
cont.appendChild(o);
}
}
else if(document.createStyleSheet){
createSVGVML = function(o, antialias) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var style = document.createStyleSheet();
style.addRule('v\\:*', "behavior: url(#default#VML);");
style.addRule('v\\:*', "antialias: "+antialias+";");
cont = o;
}
circle = function (diam, color) {
var o = document.createElement("v:oval");
o.style.position = "absolute";
o.style.cursor = "pointer";
o.strokeweight = 2;
o.strokeColor = color;
o.style.width = diam + "px";
o.style.height = diam + "px";
cont.appendChild(o);
try{
return o;
}finally{
o=null;
}
}
}
createSVGVML(document.getElementById("svg"));
circle(100,"#cccccc");
</script>
</body>
</html>
|
 |
kc_ren
2009-05-12
使用 Canvas 技术（Flotr） 性能很好~就是IE8下要写IE7兼容
|
|
fuyun
2009-05-12
kc_ren 写道 使用 Canvas 技术（Flotr） 性能很好~就是IE8下要写IE7兼容
现在各浏览器对Canvas的支持情况和兼容性好象不是很好... |
|
fuyun
2009-05-12
kimmking 写道 svg或是vml
补充一下,参考下面的网页:http://www.mozilla.org/projects/svg/status.html 这个是firefox对svg支持情况的一个列表. 貌似,现在诸多浏览器对svg的支持也还不是很完善哈... |
 |
vlinux
2009-05-14
1 <html>
2
3 <script type="text/javascript">
4 function init() {
5 alert("也许你只是需要换一种思维?");
6 }
7 </script>
8
9 <body onload="init();">
10 <div id="circle_div">
11 <img src="circle.png" style="width:50px;height:60px; "/>
12 </div>
13 </body>
14 </html>
|
|
fuyun
2009-05-14
vlinux 写道
1 <html>
2
3 <script type="text/javascript">
4 function init() {
5 alert("也许你只是需要换一种思维?");
6 }
7 </script>
8
9 <body onload="init();">
10 <div id="circle_div">
11 <img src="circle.png" style="width:50px;height:60px; "/>
12 </div>
13 </body>
14 </html>
你这是用图片来取代了... 这个问题的本意是js动画效果的实现,进一步的是要实现页面的动态交互性. PS.用图片的话,在图片较大较多的情况下,对网络要求相比较之下要更高些...(速度肯定会慢些了...),而且也不易扩展,比如,就以一个圆为例,要更换圆半径,圆周颜色和圆面填充色,以及圆显示的动画效果...这样工作量就太大了... |
|
vlinux
2009-05-15
1.图片浏览器肯定是会缓存下来的，改变img的长、宽也只是在css层进行控制，换言之就是在浏览器层控制的，不会涉及到网络。一般一个简单的圆的矢量图是很小的，不必太在意这个网络开销。
2.更换圆的半径、改变圆的大小可以通过控制width和height来实现；改变style也可以通过更改背景图片来实现，当然缺点是有的：预先制定的style肯定是有限的。 当然，如果你还需要更进一步的交互，我个人就觉得此时就不再适合用javascript了。 |
|
fuyun
2009-05-15
vlinux 写道 1.图片浏览器肯定是会缓存下来的，改变img的长、宽也只是在css层进行控制，换言之就是在浏览器层控制的，不会涉及到网络。一般一个简单的圆的矢量图是很小的，不必太在意这个网络开销。
2.更换圆的半径、改变圆的大小可以通过控制width和height来实现；改变style也可以通过更改背景图片来实现，当然缺点是有的：预先制定的style肯定是有限的。 当然，如果你还需要更进一步的交互，我个人就觉得此时就不再适合用javascript了。 楼上的还没明白本意,画圆不是目的,只是借这个理解js实现图形或动画编程的原理. 另外,说白了,自己是想用js实现图片的动态效果(正因为对ps等其他工具的不熟,或者也可以说没有图形图像这方面的天赋,所以只能借助于编程等软方式来实现了). 当图像简单的时候还好办,要复杂了,还要动画效果,这个图片的制作不是一般人可以胜任的. |
