本文主要是介绍Canvas 使用createLinearGradient绘制颜色渐变的矩形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
需求
之前我使用遍历的方式绘制了一个线的颜色渐变，这种方式其实不好，本章节来看看使用createLinearGradient方法来设置颜色渐变。
首先使用fillRect（x，y，w，h）绘画一个矩形
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>canvas{border: 1px solid #cccccc;margin-top: 100px;margin-left: 100px;}</style><script type="text/javascript">window.onload = function () {/*获取元素*/var myCanvas = document.querySelector('#myCanvas');/*获取绘图工具*/var ctx = myCanvas.getContext('2d');//绘制矩形x0 = 100; // 矩形起点的xy0 = 100; // 矩形起点的yw = 200; // 矩形宽度h = 100; // 矩形高度ctx.fillStyle = 'gold';ctx.fillRect(x0,y0,w,h); // 绘制矩形}</script>
</head>
<body><canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
浏览器显示如下：
使用createLinearGradient设置渐变色
createLinearGradient() 方法创建线性的渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示：请使用该对象作为 strokeStyle或 fillStyle 属性的值。
提示：请使用addColorStop()方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
JavaScript 语法：
context.createLinearGradient(x0,y0,x1,y1);
参数描述:
- x0 渐变开始点的 x 坐标
- y0 渐变开始点的 y 坐标
- x1 渐变结束点的 x 坐标
- y1 渐变结束点的 y 坐标
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>canvas{border: 1px solid #cccccc;margin-top: 100px;margin-left: 100px;}</style><script type="text/javascript">window.onload = function () {/*获取元素*/var myCanvas = document.querySelector('#myCanvas');/*获取绘图工具*/var ctx = myCanvas.getContext('2d');// 创建渐变色var my_gradient = ctx.createLinearGradient(100,100,300,200);my_gradient.addColorStop(0,"black");my_gradient.addColorStop(1,"white");ctx.fillStyle = my_gradient; // 设置渐变色//绘制矩形x0 = 100; // 矩形起点的xy0 = 100; // 矩形起点的yw = 200; // 矩形宽度h = 100; // 矩形高度ctx.fillRect(x0,y0,w,h); // 绘制矩形}</script>
</head>
<body><canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
浏览器显示效果如下：
这篇关于Canvas 使用createLinearGradient绘制颜色渐变的矩形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
