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 = "结束拖放"; }
				});				
			}

 

评论

6 楼 kingkit 2010-01-04  

changkunyang 写道

不知道楼主有没有发现，这有一个缺陷，那就是容器没法遮住select元素。

是的。这个还没实现。
网上流传的在div下面加一个iframe比较多人用吧。

5 楼 kingkit 2010-01-04  

iaimstar 写道

貌似现在只有ie不支持html5了

是啊，附件里面有个google团队对IE做的扩展，支持canvas的部分方法。
未实现有功能有(Uploaded Mar 2009  )
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these look very
//   different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority than the
//   width and height style values which isn't correct.
// * Painting mode isn't implemented.
....

我测试了一下，fillText方法也没实现。

4 楼 changkunyang 2010-01-04  

不知道楼主有没有发现，这有一个缺陷，那就是容器没法遮住select元素。

3 楼 iaimstar 2010-01-04  

c和v的按键确实离得很近

2 楼 dch1287 2010-01-04  

Cancas是啥 。。 囧~

1 楼 iaimstar 2010-01-04  

貌似现在只有ie不支持html5了