CSS3一覽(3) Canvas畫布(2)

2021-07-22 12:22:18 字數 1589 閱讀 5077

css3的新功能我也看了一一些,做了乙個簡要的筆記,總結一下,當成學習筆記發上來,這是css3的第四篇了。

漸變

方法說明

createlineargradient(x1,y1,x2,y2)

建立線性漸變物件,引數是兩個點的座標,確定線性漸變方向

createradialgradient(x1,y1,r1,x2,y2,r2)

建立放射漸變物件,引數是啟示圓座標和半徑、終止圓座標和半徑

adcolorstop(stop,color)

定義乙個漸變位置的範圍和顏色,stop介於0.0到1.0,color為顏色

乙個例子:

vargrd=dw.createlineargradient(0,60,120,0);

grd.addcolorstop(0,"black");

grd.addcolorstop("0.3","blue");

grd.addcolorstop("0.7","red");

grd.addcolorstop(1,"yellow");

dw.fillstyle=grd;

dw.fillrect(20,20,150,100);

陰影

方法說明

shadowcolor

設定或返回陰影的顏色

shadowblur

設定或返回陰影的模糊程度

shadowoffsetx

設定或返回陰影距形狀的水平距離,可為負

shadowoffsety

設定或返回陰影距形狀的垂直距離,可為負

乙個例子:

dw.shadowcolor="black";

dw.fillstyle="red";

dw.shadowblur=10;

dw.shadowoffsety=10;

dw.fillrect(20,20,100,80);

轉換 (類似於css的 變形transform,關鍵字都一樣,用法也一樣)

方法:scale

縮放、反轉效果,傳入兩個引數,允許負值,會影響到之後所有的操作,使用完畢後要恢復

translate

平移效果

rotate

旋轉效果,傳入引數是弧度,不是角度,和css不同

transform

矩形轉換,所有轉換都通過這個方法實現,計算很麻煩

影象合成方式

方法:globalcompositionoperation

通過設定不同的引數,實現影象疊加不同效果,比如z-index的重疊效果

引數有:

source-over

source-atop

source-in

source-out

destination-over

destination-atop

destination-in

destination-out

lighter

copy

CSS3全覽 最新布局

目錄很長時間,浮動元素是所有 web 布局方案的基礎 很大程度上依賴 clear 屬性 浮動 清除浮動 浮動形狀 使用透明影象定義形狀,shape image threshold,指定透明度為多少時允許內容流入.為形狀新增外邊距,shape margin 為形狀新增 外邊距 它可能被margin裁剪...

HTML5 CSS3新特性一覽(上)

已移除元素 新功能 其他新特性 持更 html5 新增了很多語義元素,常用的有 html5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。color date datetime datetime local email month number range search tel t...

用CSS3和Canvas來畫網格

我們經常使用一些excel 來處理資料,在html中,我們可以用table來製成 今天來看一下一些不同的方法。方法一 使用css3的background的linear gradient屬性 linear gradient表示一種線性漸變,指定好開始的座標,以及線性漸變的引數,就可以實現背景顏色的多變...