站長(zhǎng)資訊網(wǎng)如果要使用HTML Canvas實(shí)現(xiàn)徑向漸變，我們需要使用createRadialGradient()方法。下面我們來(lái)看具體的內(nèi)容。
createRadialGradient()
createRadialGradient（）的參數(shù)如下。
createRadialGradient（徑向漸變開始的X坐標(biāo)，徑向漸變開始的Y坐標(biāo)，徑向漸變開始的半徑，徑向漸變結(jié)束的X坐標(biāo)，徑向漸變結(jié)束的Y坐標(biāo)，徑向漸變結(jié)束的半徑）
我們來(lái)看具體的示例
在漸變開始和漸變結(jié)束的圓心一致的情況下
代碼如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> body { background: #C0C0C0; } </style> <script> function PageLoad() { var CanvasWidth = 1200; var CanvasHeight = 480; var canvas = document.getElementsByTagName('canvas')[0], ctx = null, grad = null, color = 255; if (canvas.getContext('2d')) { ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, CanvasWidth, CanvasHeight); grad = ctx.createRadialGradient(0, 0, 64, 0, 0, 512); grad.addColorStop(0, '#000000'); grad.addColorStop(1, '#2869fd'); ctx.fillStyle = grad; ctx.fillRect(0, 0, CanvasWidth, CanvasHeight); canvas.addEventListener('mousemove', function (evt) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, grad = ctx.createRadialGradient(x, y, 64, x, y,512); grad.addColorStop(0, '#000000'); grad.addColorStop(1, '#2869fd'); ctx.fillStyle = grad; ctx.fillRect(0, 0, CanvasWidth, CanvasHeight); }, false); } } </script> </head> <body onload="PageLoad();"> <canvas width="1200" height="480"></canvas> </body> </html>
說(shuō)明：
加載頁(yè)面時(shí)，body標(biāo)簽的onload執(zhí)行PageLoad（）函數(shù)，PageLoad函數(shù)的以下代碼在頁(yè)面加載時(shí)執(zhí)行。
canvas對(duì)象使用getElementsByTagName（）函數(shù)獲取對(duì)象，getContext獲取畫布的上下文。使用上下文clearRect（）方法清除初始化。通過(guò)上下文的createRadialGradient（）方法創(chuàng)建漸變。如果成功，漸變對(duì)象會(huì)以返回值返回。漸變的顏色由漸變對(duì)象的addColorStop方法指定。
在畫布上繪圖可以將漸變對(duì)象指定給上下文的fillStyle，并使用fillRect方法繪制漸變。
var CanvasWidth = 1200; var CanvasHeight = 480; var canvas = document.getElementsByTagName('canvas')[0], ctx = null, grad = null, color = 255; if (canvas.getContext('2d')) { ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, CanvasWidth, CanvasHeight); grad = ctx.createRadialGradient(0, 0, 64, 128, 64, 320); grad.addColorStop(0, '#b43700'); grad.addColorStop(1, '#ffe063'); ctx.fillStyle = grad; ctx.fillRect(0, 0, CanvasWidth, CanvasHeight); } }
當(dāng)鼠標(biāo)在畫布上移動(dòng)時(shí)，將執(zhí)行以下代碼。創(chuàng)建一個(gè)以鼠標(biāo)坐標(biāo)為中心的圓形漸變，并可以在畫布上繪制它。
canvas.addEventListener('mousemove', function (evt) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, grad = ctx.createRadialGradient(x, y, 64, x, y,512); grad.addColorStop(0, '#000000'); grad.addColorStop(1, '#2869fd'); ctx.fillStyle = grad; ctx.fillRect(0, 0, CanvasWidth, CanvasHeight); }, false);
運(yùn)行結(jié)果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
如果在藍(lán)色畫布中移動(dòng)鼠標(biāo)，漸變將會(huì)隨著變化。
在漸變開始和漸變結(jié)束的圓心不一致的情況下
代碼如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> body { background: #C0C0C0; } </style> <script> function PageLoad() { var CanvasWidth = 1200; var CanvasHeight = 480; var canvas = document.getElementsByTagName('canvas')[0], ctx = null, grad = null, color = 255; if (canvas.getContext('2d')) { ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, CanvasWidth, CanvasHeight); grad = ctx.createRadialGradient(0, 0, 64, 128, 64, 320); grad.addColorStop(0, '#b43700'); grad.addColorStop(1, '#ffe063'); ctx.fillStyle = grad; ctx.fillRect(0, 0, CanvasWidth, CanvasHeight); canvas.addEventListener('mousemove', function (evt) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, grad = ctx.createRadialGradient(x, y, 64, x+128, y+64, 320); grad.addColorStop(0, '#b43700'); grad.addColorStop(1, '#ffe063'); ctx.fillStyle = grad; ctx.fillRect(0, 0, CanvasWidth, CanvasHeight); }, false); } } </script> </head> <body onload="PageLoad();"> <canvas width="1200" height="480"></canvas> </body> </html>
說(shuō)明
具體思路和前面的例子一樣。只是將createRadialGradir的漸變的圓心從鼠標(biāo)指針的坐標(biāo)向x方向+ 128，y方向+ 64，錯(cuò)開漸變和結(jié)束的圓的中心。
運(yùn)行結(jié)果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
如果在畫布中移動(dòng)鼠標(biāo)，漸變將隨之變化。由于漸變的開始位置和結(jié)束位置的中心點(diǎn)不同，因此可以確認(rèn)漸變不對(duì)稱。
