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