溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關HTML5 Canvas如何繪制動態線性漸變，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
如果要使用HTML5 Canvas繪制線性漸變，需要用到createLinearGradient()方法。下面我們就來一起看看具體的內容。
createLinearGradient()
createLinearGradient()的參數如下。
createLinearGradient（漸變開始位置的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.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
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.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
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（）函數。
顯示頁面時，將處理除事件偵聽器之外的以下代碼。
在畫布上繪圖使用getElementsByTagName（）方法從ID獲取畫布對象。調用canvas對象上的getContext（）方法以獲取畫布的上下文。通過調用clearRect（）方法初始化畫布。
創建漸變是由createLinearGradient（）方法創建的。如果創建成功，則將返回漸變對象作為返回值。漸變的開始顏色和結束顏色由漸變對象的addColorStop（）方法設置。
在畫布上繪制漸變可以通過將漸變對象指定給上下文的fillStyle并執行fillRect（）方法來在畫布上繪制漸變。
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.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
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.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
grad.addColorStop(0, '#000000');
grad.addColorStop(1, '#2869fd');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
}, false);運行結果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的屏幕，完成漸變繪圖。
在畫布中移動鼠標。漸變從鼠標位置繪制到右下角。
移動鼠標時，漸變會隨著移動
關于HTML5 Canvas如何繪制動態線性漸變就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
