网站建设资讯

NEWS

网站建设资讯

HTML5Canvas如何绘制动态线性渐变-创新互联

这篇文章将为大家详细讲解有关HTML5 Canvas如何绘制动态线性渐变,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联公司是一家以网络技术公司,为中小企业提供网站维护、成都做网站、网站制作、网站备案、服务器租用、主机域名、软件开发、小程序开发等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站沟通电话:18980820575

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

HTML5 Canvas如何绘制动态线性渐变

createLinearGradient()

createLinearGradient()的参数如下。

createLinearGradient(渐变开始位置的X坐标,渐变开始位置的Y坐标,渐变结束位置的X坐标,渐变结束位置的Y坐标)

我们来看具体示例

代码如下




  
  
  
  
  


  

说明:

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

HTML5 Canvas如何绘制动态线性渐变

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

HTML5 Canvas如何绘制动态线性渐变

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

HTML5 Canvas如何绘制动态线性渐变

HTML5 Canvas如何绘制动态线性渐变

关于HTML5 Canvas如何绘制动态线性渐变就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章题目:HTML5Canvas如何绘制动态线性渐变-创新互联
本文网址:http://cdweb.net/article/dghjih.html