HTML5画布线性渐变教程

最新推荐文章于 2023-08-03 08:24:58 发布

limeiyans

最新推荐文章于 2023-08-03 08:24:58 发布

阅读量1.3k

点赞数

分类专栏： HTML5画布线性渐变教程文章标签： HTML5画布线性渐变教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18911483

版权

HTML5画布线性渐变教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

与HTML5画布创建一个线性渐变,我们可以使用createLinearGradient()方法。线性梯度是由一个假想线定义的方向梯度。一旦我们创建渐变,我们可以使用addColorStop插入颜色属性。

线性梯度的方向移动从起点到终点的假想线定义createLinearGradient()。在本教程中,我们使用两个色,浅蓝色,起源于在梯度的起点,和一个结尾的深蓝色的终点。颜色停止被放置在假想线介于0和1,0是起点,1是在终点。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
      var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#8ED6FF');   
      // dark blue
      grd.addColorStop(1, '#004CB3');
      context.fillStyle = grd;
      context.fill();
    </script>
  </body>
</html>