使用Canvas绘制渐变

Canvas是HTML5提供的一种绘制图形的元素，可以用来绘制各种图形效果，包括渐变效果。本文将介绍如何使用Canvas绘制渐变效果，并通过函数和参数的讲解，帮助编程小白理解绘图过程。

绘制线性渐变

要绘制线性渐变，可以使用createLinearGradient()函数来创建一个渐变对象，并指定起始点和终点的坐标。

var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100);

上述代码中，我们创建了一个线性渐变对象gradient，并指定起始点坐标(0, 0)和终点坐标(200, 0)。然后使用addColorStop()函数来定义渐变的颜色和位置，0表示起始位置，1表示结束位置。最后通过fillRect()函数来绘制一个矩形，并将渐变应用到矩形上。

绘制径向渐变

要绘制径向渐变，可以使用createRadialGradient()函数来创建一个渐变对象，并指定两个圆的圆心坐标和半径。

var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createRadialGradient(100, 50, 0, 100, 50, 50); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100);

上述代码中，我们创建了一个径向渐变对象gradient，并指定两个圆的圆心坐标和半径。然后使用addColorStop()函数来定义渐变的颜色和位置，0表示圆心位置，1表示半径位置。最后通过fillRect()函数来绘制一个矩形，并将渐变应用到矩形上。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 在Canvas上绘制图像 - 编程小白的简易教程
• 下一篇： 使用Canvas绘制文本