怎样运用HTML5 Canvas绘制动态线性渐变【html5教程】

假如要运用HTML5 Canvas绘制线性渐变，须要用到createLinearGradient()要领。下面我们就来一同看看细致的内容。

createLinearGradient()

createLinearGradient()的参数以下。

createLinearGradient（渐变最先位置的X坐标，渐变最先位置的Y坐标，渐变完毕位置的X坐标，渐变完毕位置的Y坐标）

我们来看细致示例

代码以下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style>
    body {
      background: #C0C0C0;
    }  
</style>
  <script>
    function PageLoad() {
      var CanvasWidth = 1200;      
      var CanvasHeight = 480;      
      var canvas = document.getElementsByTagName('canvas')[0],
          ctx = null,
          grad = null,
          color = 255;      
      if (canvas.getContext('2d')) {
        ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, '#000000');
        grad.addColorStop(1, '#2869fd');
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        canvas.addEventListener('mousemove', function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,
          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, '#000000');
          grad.addColorStop(1, '#2869fd');
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);
      }
    }  
</script>
</head>
<body onload="PageLoad();">
  <canvas width="1200" height="480"></canvas>
</body>
</html>

申明：

body标签的onload事宜在显现页面时实行PageLoad（）函数。
显现页面时，将处置惩罚除事宜侦听器以外的以下代码。
在画布上画图运用getElementsByTagName（）要领从ID猎取画布对象。挪用canvas对象上的getContext（）要领以猎取画布的上下文。经由过程挪用clearRect（）要领初始化画布。
建立渐变是由createLinearGradient（）要领建立的。假如建立胜利，则将返回渐变对象作为返回值。渐变的最先色彩和完毕色彩由渐变对象的addColorStop（）要领设置。
在画布上绘制渐变能够经由过程将渐变对象指定给上下文的fillStyle并实行fillRect（）要领来在画布上绘制渐变。

   function PageLoad() {
      var CanvasWidth = 1200;
      var CanvasHeight = 480;
      var canvas = document.getElementsByTagName('canvas')[0],
          ctx = null,
          grad = null,
          color = 255;
      if (canvas.getContext('2d')) {
        ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, '#000000');
        grad.addColorStop(1, '#2869fd');
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
      }
    }

假如在画布中挪动鼠标指针，则会实行以下事宜侦听器的代码。
从鼠标指针坐标到画布右下角建立一个线性渐变，并在画布上绘制它。

canvas.addEventListener('mousemove', function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,
          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, '#000000');
          grad.addColorStop(1, '#2869fd');
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);

运转效果

运用Web浏览器显现上述HTML文件。将显现以下所示的屏幕，完成渐变画图。