iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
自我挑戰組

學習 canvas 日記系列 第 5

第 5 天 線性漸層、圓形漸層

  • 分享至 

  • xImage
  •  

建立線性漸層 createLinearGradient
線性漸層 不像 CSS 還要有角度
這裡只需要 起點 和 終點
再利用2點連線之間的距離填色
就像下圖是由 左上(0, 0) 漸層到 右下(300,150)
https://ithelp.ithome.com.tw/upload/images/20181018/20107496a1poIvECth.jpg

var bgc = ctx.createLinearGradient(0, 0, 300, 150);
// 先取得漸層的起點和終點

bgc.addColorStop(0,'yellow');
bgc.addColorStop(0.5,'green');
bgc.addColorStop(1,'black');
// 設定漸層的位置和顏色

ctx.fillStyle = bgc;
// 把位置和顏色填入
ctx.fillRect(0,0,300,150);
// 裁切要漸層的範圍

createLinearGradient(x1, y1, x2, y2)
x1,y1 是起點 漸層到 x2,y2 終點
再用 addColorStop(漸層位置, 顏色) 插入顏色
漸層位置 : 取 0 - 1 之間值
插入多少個顏色都可以
最後都會以 "漸層位置" 0 的顏色漸層到 1

下方例子多放了幾個顏色
漸層位置也沒有依順序排列

bgc.addColorStop(0,'red');
bgc.addColorStop(0.5,'green');
bgc.addColorStop(0.7,'blue');	
bgc.addColorStop(0.9,'indigo');	
bgc.addColorStop(0.1,'orange');
bgc.addColorStop(0.3,'yellow');
bgc.addColorStop(1,'purple');	

出現的漸層也會是一樣的
https://ithelp.ithome.com.tw/upload/images/20181018/20107496skLentxHrn.jpg


建立圓形漸層 : createRadialGradient
多增加一個 圓半徑 的值
漸層固定是由內至外漸層
createRadialGradient(x1, y1, r1, x2, y2, r2)
x1, y1 圓心圓的中心點
x2, y2 最外圈圓的中心點
r1 為圓心圓的半徑
r2 最外圈圓的半徑

var bgc = ctx.createRadialGradient(130, 110, 5, 80, 80, 80);

bgc.addColorStop(0,'yellow');
bgc.addColorStop(0.5,'pink');
bgc.addColorStop(1,'purple');	

ctx.fillStyle=bgc;
ctx.fillRect(0,0,150,150);

https://ithelp.ithome.com.tw/upload/images/20181018/20107496guIfYpT4aj.jpg
上圖的漸層就是像下圖的起點漸層到終點
https://ithelp.ithome.com.tw/upload/images/20181018/20107496IkRYWLQAdb.jpg
而且 起點的圓 不能大於 終點的圓
或是內圓超出終點的大圓邊框外
超出就無法產生完整填滿的圓形漸層
而是會產生下方例子
"起點的圓大小、顏色" 漸層到 "終點的圓大小、顏色"

var bgc = ctx.createRadialGradient(50, 50, 50, 120, 120, 50);
bgc.addColorStop(0,'yellow');
bgc.addColorStop(0.5,'pink');
bgc.addColorStop(1,'purple');

https://ithelp.ithome.com.tw/upload/images/20181018/20107496ZgPMiJkr9j.jpg
https://ithelp.ithome.com.tw/upload/images/20181018/20107496RVXigbtK15.jpg


上一篇
第 4 天 範圍內的填色
下一篇
第 6 天 畫布置中
系列文
學習 canvas 日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言