Home > Article > Web Front-end > How to draw dynamic linear gradient using HTML5 Canvas
If you want to use HTML5 Canvas to draw a linear gradient, you need to use the createLinearGradient() method. Let’s take a look at the specific content below.
createLinearGradient()
The parameters of createLinearGradient() are as follows.
createLinearGradient (X coordinate of the gradient start position, Y coordinate of the gradient start position, X coordinate of the gradient end position, Y coordinate of the gradient end position)
Let's look at a specific example
The code is as follows
<!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>Explanation: The onload event of the
body tag executes the PageLoad() function when the page is displayed.
When the page is displayed, the following code in addition to the event listener will be processed.
Drawing on the canvas uses the getElementsByTagName() method to get the canvas object from the ID. Call the getContext() method on the canvas object to obtain the context of the canvas. Initialize the canvas by calling the clearRect() method.
Creating gradients is created by the createLinearGradient() method. If the creation is successful, the gradient object will be returned as the return value. The start color and end color of the gradient are set by the addColorStop() method of the gradient object.
Drawing a gradient on the canvas You can draw a gradient on the canvas by assigning the gradient object to the context's fillStyle and executing the fillRect() method.
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);
}
}If you move the mouse pointer in the canvas, the code of the following event listener will be executed.
Create a linear gradient from the mouse pointer coordinates to the lower right corner of the canvas and draw it on the canvas.
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);Running results
Use a web browser to display the above HTML file. The screen shown below will be displayed, completing the gradient drawing.
Move the mouse in the canvas. The gradient is drawn from the mouse position to the lower right corner.
When you move the mouse, the gradient will move with it
The above is the detailed content of How to draw dynamic linear gradient using HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!