首页 / HTML5 / 如何使用HTML5Canvas绘制动态线性渐变

如何使用HTML5Canvas绘制动态线性渐变

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何使用HTML5Canvas绘制动态线性渐变，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3070字，纯文字阅读大概需要5分钟。

内容图文

如果要使用HTML5 Canvas绘制线性渐变，需要用到createLinearGradient()方法。下面我们就来一起看看具体的内容。

如何使用HTML5Canvas绘制动态线性渐变 - 文章图片

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文件。将显示如下所示的屏幕，完成渐变绘图。

如何使用HTML5Canvas绘制动态线性渐变 - 文章图片

在画布中移动鼠标。渐变从鼠标位置绘制到右下角。

如何使用HTML5Canvas绘制动态线性渐变 - 文章图片

移动鼠标时，渐变会随着移动

如何使用HTML5Canvas绘制动态线性渐变 - 文章图片

如何使用HTML5Canvas绘制动态线性渐变 - 文章图片

以上就是如何使用HTML5 Canvas绘制动态线性渐变的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的如何使用HTML5Canvas绘制动态线性渐变全部内容，希望文章能够帮你解决如何使用HTML5Canvas绘制动态线性渐变所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/386790.html

来源：【匿名】