武林網(www.vevb.com)文章簡介:HTML5每日一練之Canvas標籤的應用-繪製線性漸變圖形.
到目前為止,我們使用canvas繪製圖形的基本知識已經介紹完畢,從本節開始,我們將介紹其他比較高級的繪製知識之一- 線性漸變,首先我們來回顧一下《HTML5每日一練之Canvas標籤的應用-繪製矩形》中指定填充的顏色fillStyle。繪製線性漸變時,我們需要使用到一個新的對象-LinearGradient對象,使用圖形上下文對象的createLinearGradiend方法來創建該對象,該方法的定義如下:yStart:漸變起始點的縱坐標
xEnd:漸變結束點橫坐標
yEnd:漸變結束點縱坐標
通過使用該方法,創建了一個使用兩個坐標點的LinearGradient對象,那麼漸變的顏色該怎麼設定?
咱們通過LinearGradient對像後,使用addColorStop方法進行設定,該方法的示例如下:
offset:是設定顏色離開漸變起始點的0-1之間的浮點數的偏移量
color:是設定繪製使用的顏色
addColorStop方法中offset參數的圖示