HTML5canvas如何绘制动态径向渐变

代码如下

说明：

加载页面时，body标签的onload执行PageLoad（）函数，PageLoad函数的以下代码在页面加载时执行。

canvas对象使用getElementsByTagName（）函数获取对象，getContext获取画布的上下文。使用上下文clearRect（）方法清除初始化。通过上下文的createRadialGradient（）方法创建渐变。如果成功，渐变对象会以返回值返回。渐变的颜色由渐变对象的addColorStop方法指定。

在画布上绘图可以将渐变对象指定给上下文的fillStyle，并使用fillRect方法绘制渐变。

var CanvasWidth = 1200;      
var CanvasHeight = 480;      
var canvas = document.getElementsByTagName(&＃39;canvas&＃39;)[0],
          ctx = null,
          grad = null,
          color = 255;      
          if (canvas.getContext(&＃39;2d&＃39;)) {
        ctx = canvas.getContext(&＃39;2d&＃39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createRadialGradient(0, 0, 64, 128, 64, 320);
        grad.addColorStop(0, &＃39;#b43700&＃39;);
        grad.addColorStop(1, &＃39;#ffe063&＃39;);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
      }
    }

当鼠标在画布上移动时，将执行以下代码。创建一个以鼠标坐标为中心的圆形渐变，并可以在画布上绘制它。

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

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

在渐变开始和渐变结束的圆心不一致的情况下

代码如下

说明

具体思路和前面的例子一样。只是将createRadialGradir的渐变的圆心从鼠标指针的坐标向x方向+ 128，y方向+ 64，错开渐变和结束的圆的中心。

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

以上就是HTML5 canvas如何绘制动态径向渐变的详细内容，更多请关注其它相关文章！