HTML5 canvas如何繪製動態徑向漸變
如果要使用HTML Canvas實作徑向漸變，我們需要使用createRadialGradient()方法。下面我們來看具體的內容。
createRadialGradient()
#createRadialGradient（）的參數如下。
createRadialGradient（徑向漸變開始的X座標，徑向漸變開始的Y座標，徑向漸變開始的半徑，徑向漸變結束的X座標，徑向漸變結束的Y座標，徑向漸變結束的半徑）
我們來看具體的範例
在漸變開始和漸變結束的圓心一致的情況下
程式碼如下
<!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>說明：
載入頁面時，body標籤的onload執行PageLoad（）函數，PageLoad函數的以下程式碼在頁面載入時執行。
canvas物件使用getElementsByTagName（）函數取得對象，getContext取得畫布的上下文。使用上下文clearRect（）方法清除初始化。透過上下文的createRadialGradient（）方法建立漸變。如果成功，漸層物件會以傳回值傳回。漸變的顏色由漸層物件的addColorStop方法指定。
在畫布上繪圖可以將漸層物件指定給上下文的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);
}
}當滑鼠在畫布上移動時，將執行下列程式碼。建立一個以滑鼠座標為中心的圓形漸變，並可以在畫布上繪製它。
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);執行結果
使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。
如果在藍色畫布中移動滑鼠，漸變將會隨著變化。
#在漸變開始和漸變結束的圓心不一致的情況下
程式碼如下
<!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>說明
具體想法和前面的範例一樣。只是將createRadialGradir的漸變的圓心從滑鼠指標的座標向x方向 128，y方向 64，錯開漸變和結束的圓的中心。
運行結果
使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。
如果在畫布中移動滑鼠，漸層將會隨之變化。由於漸層的開始位置和結束位置的中心點不同，因此可以確認漸變不對稱。
以上是HTML5 canvas如何繪製動態徑向漸變的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
H5頁面製作究竟指什麼
Apr 06, 2025 am 07:18 AM
H5 頁面製作是指使用 HTML5、CSS3 和 JavaScript 等技術，創建跨平台兼容的網頁。其核心在於瀏覽器解析代碼，渲染結構、樣式和交互功能。常見技術包括動畫效果、響應式設計和數據交互。為避免錯誤，應使用開發者工具調試；而性能優化和最佳實踐則包括圖像格式優化、減少請求和代碼規範等，以提高加載速度和代碼質量。
h5項目怎麼運行
Apr 06, 2025 pm 12:21 PM
運行 H5 項目需要以下步驟：安裝 Web 服務器、Node.js、開發工具等必要工具。搭建開發環境，創建項目文件夾、初始化項目、編寫代碼。啟動開發服務器，使用命令行運行命令。在瀏覽器中預覽項目，輸入開發服務器 URL。發布項目，優化代碼、部署項目、設置 Web 服務器配置。
h5怎麼製作點擊圖標
Apr 06, 2025 pm 12:15 PM
製作 H5 點擊圖標的步驟包括：在圖像編輯軟件中準備方形源圖像。在 H5 編輯器中添加交互性，設置點擊事件。創建覆蓋整個圖標的熱點。設置點擊事件的操作，如跳轉頁面或觸發動畫。導出 H5 文檔為 HTML、CSS 和 JavaScript 文件。將導出的文件部署到網站或其他平台。
H5指的是什麼？探索上下文
Apr 12, 2025 am 12:03 AM
H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
什麼是H5編程語言？
Apr 03, 2025 am 12:16 AM
H5不是獨立編程語言，而是HTML5、CSS3和JavaScript的集合，用於構建現代Web應用。 1.HTML5定義網頁結構和內容，提供新標籤和API。 2.CSS3控製樣式和佈局，引入動畫等新特性。 3.JavaScript實現動態交互，通過DOM操作和異步請求增強功能。
h5怎麼製作彈窗
Apr 06, 2025 pm 12:12 PM
H5 彈窗製作步驟：1. 確定觸發方式（點擊式、時間式、退出式、滾動式）；2. 設計內容（標題、正文、行動按鈕）；3. 設置樣式（大小、顏色、字體、背景）；4. 實現代碼（HTML、CSS、JavaScript）；5. 測試和部署。
H5頁面製作的優勢有哪些
Apr 05, 2025 pm 11:48 PM
H5 頁面製作的優勢包括：輕量級體驗，加載速度快，提升用戶留存率。跨平台兼容性，無需針對不同平台適配，提升開發效率。靈活性和動態更新，無需審核，便於內容修改和更新。成本效益，開發成本比原生 App 低。
H5與HTML5相同嗎？
Apr 08, 2025 am 12:16 AM
"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。
