HTML5画布线性渐变教程

来源：互联网发布：见一叶而知秋编辑：程序博客网时间：2024/05/02 00:46

与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>

0 0