Canvas做的圓角視窗 有陰影

2021-08-30 09:44:42 字數 967 閱讀 5942

canvas做的圓角視窗(有陰影)

傳統的寫圓角方式主要有兩種方法,一種是做背景圖、另一種是用很多個不同透明度或者明暗不同的畫素點圍成乙個圓角。第一種的話比較容易實現,但需要切圖;第二種網上主要有以下這幾個做得很不錯的:

1. curvycorners  www.curvycorners.net

2. nifty corners 

3. anti-aliased-nifty-corners 

4. rounded-corners 

5. rounded_corners 

第5個是綜合前面幾個的結晶。

最近在寫一套web ui元件做到視窗的時候在想,有沒另外的方法來實現圓角呢?既不用也不用乙個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()

document.getelementbyid('closebtn').onclick = function()

var drag = new drag("container", ,

onmove: function(),

onstop: function()

});

}

QT 設定視窗陰影,設定視窗圓角

qt開發過程中,新增過自定義標題欄後,因為設定了 setwindowflags qt framelesswindowhint 屬性,widget介面後面陰影沒有了。現在使用paint的方法繪製陰影和視窗圓角,一方面能設定陰影,一方面可解決設定的視窗圓角後,仍殘留四個小角的問題。廢話不說 上 先設定屬...

設定view的圓角 邊框 陰影

在ios開發中,任何可見檢視都是繼承於uiview的。繼承體系中,大部分uiview的屬性適用於其任何孩子。而uiview的layer屬性可以繪製uiview的各種效果。其實我們看到的view的動畫實際上也是layer在繪製。objc view plain copy cornerview layer...

WPF學習 最大化有陰影的無邊框窗體

畫兩個按鈕,希望執行時只顯示乙個按鈕,另乙個按鈕隱藏。用到 visibility collapsed 隱藏按鈕,且不為它保留位置。horizontalalignment right template verticalalignment top width 45 height 42 最小化 最大化 關...