如何在HTML5中绘制线性渐变？

此方法返回一个CanvasGradient对象，该对象表示一个线性渐变，该渐变沿着参数所表示的坐标给出的线进行绘制。四个参数代表渐变的起点(x1,y1)和终点(x2,y2)。

createLinearGradient(x0, y0, x1, y1)

这是方法的参数值createLinearGradient()-

序号	参数及说明
1	x0 x坐标-渐变的起点
2	y0 y-坐标-渐变的起点
3	x1 x坐标-渐变的终点
4	y1 y-坐标-渐变的终点

示例

您可以尝试运行以下代码，以了解如何在HTML5中绘制线性渐变-

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Linear Gradient</title>
   </head>

   <body>
      <canvas id="newCanvas" width="450" height="250" style="border:1px
         solid #d3d3d3;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         var linegrd = ctxt.createLinearGradient(0, 0, 170, 0);
         linegrd.addColorStop(0.5, "#E44D26");
         linegrd.addColorStop(1, "#66CC00");
         ctxt.fillStyle = linegrd;
         ctxt.fillRect(50, 80, 300, 100);
      </script>
   </body>
</html>

基础教程