「js高手之路」html5 canvas系列教程-線形漸變

一、線形漸變

線形漸變指的是一條直線上發生的漸變。

用法：

var linear = cxt.createLinearGradient( x1, y1, x2, y2 );

linear.addColorStop( value1, color1 );

linear.addColorStop( value2, color2 );

.....

oGc.fillStyle = linear

oGc.fill();

1) createLinearGradient創建一個線形漸變對象. x1, y1表示漸變的起點. x2, y2表示漸變的終點.

2)addColorStop在某處添加漸變顏色值

3)fillStyle：把漸變對象作為填充樣式

4)調用fill及其他相關圖形進行漸變填充

水平漸變

垂直漸變：

對角線漸變：

為文字添加線形漸變效果：

二、徑向漸變

顏色漸變從一個起點向各個方向漸變，用法跟線形漸變差不多，只不過創建漸變的時候用的是另一個函數

var radial = cxt.createRadialGradient( x1, y1, r1, x2, y2, r2 )

....下面的步驟跟線形漸變一樣，不再重複了

x1, y1起始點的圓心坐標，r1: 起始點 圓的半徑

x2，y2結束點的圓心坐標，r2:結束點 圓所在的半徑

在圖中做出了第一個徑向漸變的圓心坐標，便於觀看

同心圓漸變:

給文字設置陰影：

給圖片設置陰影：

給圖片的四周設置陰影：

把shadowOffsetX和shadowOffsetY都設置為0，那麼就會在四周產生陰影效果

（作者:ghostwu, 出處:http://www.cnblogs.com/ghostwu 博客大多數文章均屬原創，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利）

·找工作難？那是你沒選對行業!

2017年【中公教育】特別推出2017年就業促進計劃，500萬就業基金助你成為IT達人

詳情請戳：http//www.ujiuye.com/zt/jycj/?wt.bd=bgz

· 什麼？海量IT學習資料白給你都不要？別想了，加群搶：584539956

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！