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

kingkit

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