HTML5+CSS3-充实笔记0609

280

收藏 2019-06-09

4.4绘制渐变
线性渐变
var gradient = createLinearGradient(0, 0, 300, 0);
//创建宽度为300Px的水平线性渐变，这个是渐变对象，然后需要定义渐变的颜色。

addColorStop(stop, color)函数来定义渐变的颜色
gradient.addColorStop(0, "#f00");
gradient.addColorStop(1, "#00f"); //红色到蓝色的渐变
ctx.fillStyle = gradient; //设置fillStyle为当前的渐变对象
ctx.fillRect(0, 0, 400, 300); //绘制渐变图形

到这里才将一个线性渐变的图形绘制完成。
完整代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>4.4.1.html</title>
</head>
<body>
   <canvas id="myCanvas">Test</canvas>
   <script type="text/javascript">
      var canvas = document.getElementById("myCanvas");
      if(canvas && canvas.getContext){
         var ctx = canvas.getContext("2d");
         var grad = ctx.createLinearGradient(0, 0, 300, 0);
         grad.addColorStop(0, "#f00");
         grad.addColorStop(1, "#00f");
         ctx.fillStyle = grad;
         ctx.fillRect(0, 0, 300, 100);
      }
   </script>

</body>
</html>