Part8-漸變與陰影 · 前端小冊

[TOC] ## 線性漸變語法： ```js let gnt = cxt.createLinearGradient(x1, y1, x2, y2) gnt.addColorStop(value1, color1) gnt.addColorStop(value2, color2) cxt.fillStyle = gnt cxt.fill() ``` 說明：在 Canvas 中，實現線性漸變有以下三個步驟 (1) 調用 createLinearGradient() 方法創建一個 linearGradient 對象，并賦值給變量 gnt (2) 調用 linearGradient 對象的 addColorStop() 方法 N 次，第 1 次表示漸變開始的顏色，第 2 次表示漸變結束時的顏色。然后第 3 次則以第 2 次漸變顏色作為開始顏色，進行漸變，依此類推。 (3) 把 linearGradient 對象賦值給 fillStyle 屬性，并調用 fill() 方法來繪制有漸變色的圖形。 ``` var gnt = cxt.createLinearGradient(x1, y1, x2, y2) ``` x1、y1 表示漸變色開始點的坐標，x2、y2 表示漸變色結束點的坐標，其有以下關系： - 如果 y1 與 y2 相同，表示沿水平方向從左到右漸變 - 如果 x1 與 x2 相同，表示沿著垂直方向從左到右漸變 - 如果 x1 與 x2 不相同，且 y1 與 y2 也不相同，則表示漸變色沿著矩形對角線方向漸變 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漸變</title> </head> <body> <canvas id="canvas" style="margin:0 auto; border: 1px solid gray"></canvas> <script> window.onload = function () { let canvas = document.getElementById('canvas') canvas.width = 600 canvas.height = 600 let context = canvas.getContext('2d') let linearGrad = context.createLinearGradient(0,0,400,400) // 改變坐標來改變漸變方向 linearGrad.addColorStop(0,'white') // ColorStop 可以添加無數個,相當于一個中間狀態 linearGrad.addColorStop(0.25,'yellow') // 只能用小數不能用百分號... linearGrad.addColorStop(0.5,'green') linearGrad.addColorStop(0.75,'blue') linearGrad.addColorStop(1,'black') context.fillStyle = linearGrad context.fillRect(0,0,800,800) } </script> </body> </html>  ``` 下圖分別是橫向，縱向，對角的線型漸變的效果 ![](https://img.kancloud.cn/7f/f0/7ff01ccb2d7d2c0f0bc5e9444e9a302f_761x761.png =150x) ![](https://img.kancloud.cn/97/b7/97b7cb5f4c1cf15f3f04b8b4327dc553_755x757.png =150x) ![](https://img.kancloud.cn/cb/1e/cb1eb839368757eeef7642a2e44abfea_752x757.png =150x) ## 陰影 | 屬性 | 說明 | | --- | --- | | shadowOffsetX | 陰影與圖形的水平距離，默認值為 0。大于 0 時向右偏移，小于 0 時向左偏移 | | shadowOffsetY | 陰影與圖形的垂直距離，默認值為 0。大于 0 時向下偏移，小于 0 時向上偏移 | | shadowColor | 陰影的顏色，默認為黑色 | | shadowBlur | 陰影的模糊值，默認為 0。該值越大，模糊度越強 | ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="canvas" width="1024" height="700" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas> <script> window.onload = function(){ let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') // 定義文字 const text = 'Canvas 陰影' cxt.font = "bold 60px 微軟雅黑" // 定義陰影 cxt.shadowOffsetX = 5 cxt.shadowOffsetY = 5 cxt.shadowColor = 'LightSkyBlue' cxt.shadowBlur = 10 // 填充文字 cxt.fillStyle = 'HotPink' cxt.fillText(text, 10, 90) // 圖片陰影 let image = new Image() image.src = './image.jpg' image.onload = function () { cxt.shadowOffsetX = 0 cxt.shadowOffsetY = 0 cxt.shadowColor = '#FF6666' cxt.shadowBlur = 10 cxt.fillRect(10, 150, 500, 281) cxt.drawImage(image, 10, 150) } } </script> </body> </html> ``` ![](https://img.kancloud.cn/ea/98/ea9856c762f9ea09a06742c084995cda_1332x600.png)