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

  • Z时代
  • 2024-01-10
  • 分类：综合

此方法返回一个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>

以上是 如何在HTML5中绘制线性渐变？ 的全部内容， 来源链接： utcz.com/z/315956.html

回到顶部