如果要使用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绘制动态线性渐变的详细内容。