Canvas做的圆角窗口(有阴影)

Canvas做的圆角窗口(有阴影)
传统的写圆角方式主要有两种方法，一种是图片做背景图、另一种是用很多个不同透明度或者明暗不同的像素点围成一个圆角。第一种的话比较容易实现，但需要切图；第二种网上主要有以下这几个做得很不错的：
1. Curvycorners  www.curvycorners.net
2. Nifty Corners  http://pro.html.it/esempio/nifty/
3. anti-aliased-nifty-corners  http://www.acko.net/anti-aliased-nifty-corners
4. rounded-corners  http://seky.nahory.net/2005/04/rounded-corners/
5. rounded_corners  http://www.editsite.net/blog/rounded_corners.html
第5个是综合前面几个的结晶。
最近在写一套web UI组件http://kingkit.iteye.com/admin/blogs/462880，做到窗口的时候在想，有没另外的方法来实现圆角呢？既不用图片也不用一个1像素的DIV来拼。后来找资料时发现用HTML5的元素canvas可以画图，另外还有个mootools的UI框架也是用同样的方式实现的，所以翻了下资料后自己也动手做了一下，大家看这种方法会不会比图片和拼像素的实现方法好呢？
最终做出来的效果如图（附demo）：



 

 
 
 
注：Drag类是从网上拿来的，作者好像是cloudgamer

调用：

var width = 500;
			var height = 250;
			var radius = [5,5,5,5];//圆角半径:左上，左下，右下，右上			
			var title = "KUI web组件之容器";
			var content = "s圆角半径:左上，左s圆角半径:左上，";
			window.onload = function(){				
				//var d = new Container(title, content, width, height, radius, shadowBlur);
				var d = new Container(title, content, width, height, radius);
				document.getElementById('openBtn').onclick = function(){
					d.show();	
				}				
				document.getElementById('closeBtn').onclick = function(){
					d.hide();	
				}
				var drag = new Drag("container", { mxContainer: "con", Handle: "titleBar", Limit: true,
					onStart: function(){ $("idShow").innerHTML = "开始拖放"; },
					onMove: function(){ $("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; },
					onStop: function(){ $("idShow").innerHTML = "结束拖放"; }
				});				
			}

 

评论

26 楼 ray_linn 2010-08-03  

很早就有了，用javascript做圆角。。。

25 楼 rainsilence 2010-08-01  

lz很有创意哈。。。整个窗口都用canvas实现，按钮和输入的地方用定位实现，拖动的地方再盖一层div。

robinqu 写道

为啥要用canvas写圆角？
支持canvas的浏览器不是都支持border-radius么？

对于border-radius的支持程度不一样的。。。也没办法达到Canvas的灵活程度。如果你不想用圆角了，想要不规则页面了怎么办？

24 楼 robinqu 2010-07-24  

为啥要用canvas写圆角？
支持canvas的浏览器不是都支持border-radius么？

23 楼 viperasi 2010-07-21  

恩 现在貌似跟mochaui感觉很像哦。

mochaui也是跟jquery好像有冲突，需要jquery释放$符号。

22 楼 kingkit 2010-06-15  

yuqihui 写道

好像与jQuery有冲突。
将jQuery.js在包内js之后导入，Drag.js出错。
将jQuery.js在包内js之前导入，可以
但我的其他用到jQuery的就出错了。

你把Drag.js里面的$修改一下就可以了。

21 楼 tao0749 2010-06-08  

ie8 不太兼容哦·

20 楼 yuqihui 2010-01-16  

好像与jQuery有冲突。
将jQuery.js在包内js之后导入，Drag.js出错。
将jQuery.js在包内js之前导入，可以
但我的其他用到jQuery的就出错了。

19 楼 fkpwolf 2010-01-08  

居然用宋体，汗

18 楼 WendyJan 2010-01-08  

不错，看来楼主也是喜欢用chrome，哈哈``这个浏览器我用了一年左右了吧。

17 楼 jacki6 2010-01-07  

不错 之前用css弄了个 直接在网上找了个css 然后直接引用 也可以实现 收藏了先

16 楼 sidac 2010-01-06  

效果不错，支持一下

15 楼 kingkit 2010-01-06  

hanjiangit 写道

下在了楼主的代码 用IE打开跟firefox打开的效果一样 是否IE已经支持html5了？

非也。IE还不支持canvas，是因为用了google团队开发的excanvas的缘故。

14 楼 hanjiangit 2010-01-06  

下在了楼主的代码 用IE打开跟firefox打开的效果一样 是否IE已经支持html5了？

13 楼 iaimstar 2010-01-05  

html5可不算瞎折腾

12 楼 wv1124 2010-01-05  

别在折腾我们这些程序员啦！

11 楼 kingkit 2010-01-05  

iaimstar 写道

引入这个js的成本大么？

兼顾一下IE，成本大不大看自己的需要吧，呵呵

10 楼 iaimstar 2010-01-05  

引入这个js的成本大么？

9 楼 kingkit 2010-01-05  

black.angel 写道

LS 请教一下 Canvas 怎么支持 IE6 ?

用 excanvas，你看附件里面，我加了这一行：

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

8 楼 black.angel 2010-01-05  

LS 请教一下 Canvas 怎么支持 IE6 ?

7 楼 dayone 2010-01-05  

IE6下效果一样的，不错