HTML5陰影與漸變

2022-03-30 08:42:44 字數 630 閱讀 7647

一、陰影

陰影的效果,陰影有四個狀態值控制,分別是shadowblur,shadowoffsetx,shadowoffsety和shadowcolor。

shadowblur為陰影的畫素模糊值,

shadowoffsetx和shadowoffsety為陰影在x軸和y軸上的偏移值,

shadowcolor為陰影顏色值,

其中預設的值是前三個值都為0,最後乙個值設定為透明黑色。只需修改其中的兩個值就可以顯現出來陰影效果

二、線性漸變

createlineargradient(x1,y1,x2,y2)方法x1,y1漸變起始點,x2,y2漸變結束點

addcolorstop()新增漸變顏色

三、徑向漸變

createradialgradient(x0,y0,r0,x1,y1,r1)方法

x0 漸變的開始圓的 x 座標

y0 漸變的開始圓的 y 座標

r0 開始圓的半徑

x1 漸變的結束圓的 x 座標

y1 漸變的結束圓的 y 座標

r1 結束圓的半徑

練習**

HTML5繪製顏色漸變

繪製線性漸變要用到 createlineargradient,方法如 createlineargradient xstart,ystart,xend,yend xstart為漸變起始地點的橫座標,ystart為漸變起始地點的縱座標,xend為漸變結束地點的橫座標,yend為漸變起始地點的縱座標。繪製...

HTML5利用canvas API展示陰影效果

html5的canvas自帶api可以顯示陰影效果,主要還是在畫布 canvas 的上下文物件 context 上做文章 1.2.3.4.html5 combine shape demo 5.6.7.8.9.10.11.12.13.14.畫帶陰影效果的圖形見如下的js 1.2.this file i...

HTML5與HTML的區別

1.簡化的語法 更簡單的doctype宣告是html5裡眾多新特徵之一。現在你只需要寫,這就行了。html5的語法相容html4和xhtml1,但不相容sgml。2.乙個替代flash的新 標記 目前,標記並不能提供所有的flash具有的功能,但假以時日,flash必將從web上淘汰。我們拭目以待,...