canvas-渐变色

最新推荐文章于 2024-01-13 00:00:00 发布

十里夜

最新推荐文章于 2024-01-13 00:00:00 发布

阅读量650

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.youkuaiyun.com/hgyu_962464/article/details/54893219

版权

canvas 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas-渐变色</title>
    <style>
        #canvas{
            border: 1px solid palevioletred;
        }
    </style>
    <script>
      window.onload = function (){
          //获取到canvas元素
          var canvas = document.getElementById('canvas');
          //获取canvas中的画图环境
          var context = canvas.getContext('2d');

          //线性渐变
          //根据设置的线性渐变的坐标，可以达到不同的效果
          //创建线性渐变对象 .createLinearGradient(起始X坐标,起始Y坐标,终止X坐标,终止Y坐标);
          var linear = context.createLinearGradient(10,10,200,10);
          //添加渐变颜色 .addColorStop(float(0~1的数字),'颜色');
          linear.addColorStop(0,'red');
          linear.addColorStop(0.2,'orange');
          linear.addColorStop(0.4,'yellow');
          linear.addColorStop(0.6,'green');
          linear.addColorStop(0.8,'cyan');
          linear.addColorStop(1,'blue');
          //设置填充属性
          context.fillStyle = linear;
          //绘制矩形
          context.fillRect(10,10,200,100);

          //根据设置的线性渐变的坐标，可以达到不同的效果
          var linear1 = context.createLinearGradient(250,10,450,100);
          //添加渐变颜色 .addColorStop(float(0~1的数字),'颜色');
          linear1.addColorStop(0,'red');
          linear1.addColorStop(0.2,'orange');
          linear1.addColorStop(0.4,'yellow');
          linear1.addColorStop(0.6,'green');
          linear1.addColorStop(0.8,'cyan');
          linear1.addColorStop(1,'blue');
          context.fillStyle = linear1;
          context.fillRect(250,10,200,100);

          //径向渐变  or 放射渐变
          context.beginPath();
          //根据设置的径向渐变的坐标不一样，可以达到不同的效果
          //径向渐变区域处于小圆以外和大圆以内的区域，从小圆的外径开始渐变一直到大圆外径
          //创建径向渐变对象 .createRadialGradient(小圆圆心X坐标,小圆圆心Y坐标,小圆半径,大圆圆心X坐标,大圆圆心Y坐标,大圆半径);
          var radial = context.createRadialGradient(120,250,1,120,250,100);
          //添加渐变颜色 .addColorStop(float(0~1的数字),'颜色');
          radial.addColorStop(0,'red');
          radial.addColorStop(0.2,'orange');
          radial.addColorStop(0.4,'yellow');
          radial.addColorStop(0.6,'green');
          radial.addColorStop(0.8,'cyan');
          radial.addColorStop(1,'blue');
          //设置填充属性
          context.fillStyle = radial;
          //绘制圆形.arc(X坐标,Y坐标,半径,起始坐标（弧度制）,终止坐标（弧度制）,画法顺序（ture:逆时针/false:顺时针）);
          context.arc(120,250,100,0,Math.PI*2,false);
          //颜色进行填充
          context.fill();
         // context.stroke();

          //径向渐变  or 放射渐变
          context.beginPath();
          //根据设置的径向渐变的坐标不一样，可以达到不同的效果
          radial = context.createRadialGradient(320,250,20,340,250,100);
          //添加渐变颜色 .addColorStop(float(0~1的数字),'颜色');
          radial.addColorStop(0,'red');
          radial.addColorStop(0.2,'orange');
          radial.addColorStop(0.4,'yellow');
          radial.addColorStop(0.7,'green');
          radial.addColorStop(0.9,'cyan');
          radial.addColorStop(1,'blue');
          //设置填充属性
          context.fillStyle = radial;
          context.arc(350,250,100,0,Math.PI*2,false);
          //颜色进行填充
          context.fill();

      }
    </script>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px">
    </canvas>
</body>
</html>