hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

HTML5 canvas怎样绘制动态径向渐变【html5教程】

2019-11-26HTML搜搜PHP网68°c
A+ A-
假如要运用HTML Canvas完成径向渐变,我们须要运用createRadialGradient()要领。下面我们来看细致的内容。

createRadialGradient()

createRadialGradient()的参数以下。

createRadialGradient(径向渐变最先的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.createRadialGradient(0, 0, 64, 0, 0, 512);
        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.createRadialGradient(x, y, 64, x, y,512);
          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()函数,PageLoad函数的以下代码在页面加载时实行。

canvas对象运用getElementsByTagName()函数猎取对象,getContext猎取画布的上下文。运用上下文clearRect()要领消灭初始化。经由过程上下文的createRadialGradient()要领建立渐变。假如胜利,渐变对象会以返回值返回。渐变的色彩由渐变对象的addColorStop要领指定。

在画布上画图能够将渐变对象指定给上下文的fillStyle,并运用fillRect要领绘制渐变。

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.createRadialGradient(0, 0, 64, 128, 64, 320);
        grad.addColorStop(0, '#b43700');
        grad.addColorStop(1, '#ffe063');
        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.createRadialGradient(x, y, 64, x, y,512);
          grad.addColorStop(0, '#000000');
          grad.addColorStop(1, '#2869fd');
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);

运转结果

运用Web浏览器显现上述HTML文件。将显现以下所示的结果。

假如在蓝色画布中挪动鼠标,渐变将会跟着变化。


在渐变最先和渐变完毕的圆心不一致的情况下

代码以下

<!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.createRadialGradient(0, 0, 64, 128, 64, 320);
        grad.addColorStop(0, '#b43700');
        grad.addColorStop(1, '#ffe063');
        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.createRadialGradient(x, y, 64, x+128, y+64, 320);
          grad.addColorStop(0, '#b43700');
          grad.addColorStop(1, '#ffe063');

          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);
      }
    }  
</script>
</head>
<body onload="PageLoad();">
  <canvas width="1200" height="480"></canvas>
</body>
</html>

申明

细致思绪和前面的例子一样。只是将createRadialGradir的渐变的圆心从鼠标指针的坐标向x方向+ 128,y方向+ 64,错开渐变和完毕的圆的中间。

运转结果

运用Web浏览器显现上述HTML文件。将显现以下所示的结果。

假如在画布中挪动鼠标,渐变将随之变化。因为渐变的最先位置和完毕位置的中间点差别,因而能够确认渐变不对称。

以上就是HTML5 canvas怎样绘制动态径向渐变的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
HTML5 canvas怎样绘制动态径向渐变【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: