createLinearGradient()
createLinearGradient()的参数如下。
createLinearGradient（渐变 开始 位置的X坐标，渐变开始位置的Y坐标，渐变结束位置的X坐标，渐变结束位置的Y坐标）
我们来看具体示例
代码如下
<!DOCTY PE ht ML >
<html>
<head>
< ;m eta http-equiv="Content -t ype" content="text/html; charset=utf-8" />
<t IT le></title>
<meta charset="utf-8" />
<style>
body {
background: # C0C0C0;
}
</style>
<script>
function PageLoad() {
VAR CanvasWidth = 1200;
var CanvasH ei ght = 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('mou SEM ove', 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（）函数。
显示页面时，将处理除事件侦听器之外的以下代码。
在 画布 上绘图使用getElementsByTagN am e（）方法从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绘制动态线性渐变的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 如何使用HTML5 Canvas绘制动态线性渐变 全部内容，希望文章能够帮你解决 如何使用HTML5 Canvas绘制动态线性渐变 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于如何使用HTML5 Canvas绘制动态线性渐变的详细内容...