• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    十一选五369每天赚一千:canvas createRadialGradient() 径向渐变

    燕赵风采20选5走势图 www.fllv.net 2018-8-9 08:59| 作者: admin| 查看: 1799| 评论: 0|来自: 蚂蚁部落

    径向渐变就是从起点到终点颜色进行圆形渐变。

    推荐参阅教程板块canvas createLinearGradient()一文。

    语法结构:

    [JavaScript] 纯文本查看 复制代码
    createRadialGradient(x1,y1,r1,x2,y2,r2)

    参数解析:

    (1).x1,y1:规定渐变起点圆心坐标。

    (2).r1:规定渐变起点圆的半径尺寸。

    (3).x2,y2:规定渐变终点圆心坐标。

    (4).r2:规定渐变终点圆的半径尺寸。

    既然是颜色的渐变,那么就需要添加颜色,使用addColorStop方法即可实现。

    addColorStop()方法具有两个参数,第一个参数规渐变颜色的起点位置,第二个参数规定渐变颜色。

    先看一个图示:

    a:3:{s:3:\"pic\";s:43:\"portal/201808/09/090140uqp0zcvq9htb9pbs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    可能不少朋友想当然的认为,渐变是从起点圆心开始,到终点圆外层结束。事实并非如此,渐变区域是紫色之间的区域。

    代码实例如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    <style>
    canvas {
      border: 2px dotted #ccc;
      margin: 50px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function () {
      var cvs = document.getElementById("canvas");
      var ctx = cvs.getContext('2d');
      var gnt = ctx.createRadialGradient(200, 300, 50, 200, 200, 200);
      gnt.addColorStop(0, 'green');
      gnt.addColorStop(0.3, 'blue');
      gnt.addColorStop(1, 'red');
      ctx.fillStyle = gnt;
      ctx.arc(200, 300, 200, 0, 2 * Math.PI);
      ctx.fill();
    }
    </script>
    </head>
    <body>
    <canvas id="canvas" width="800" height="600"></canvas>
    </body>
    </html>

    上面的代码实现了径向渐变的演示,下面对代码做一下分析。

    代码分析:

    (1).添加了绿色、蓝色和红色为渐变颜色。

    (2).划分渐变的区域是渐变开始圆的外缘到渐变结束圆外缘,也就是上面图片紫色之间的区域。如果这段区域整体为1,那么0.3就是百分之30处。0-0.3是由绿色渐变为蓝色,0.3-1是由蓝色渐变为红色。

    (3).addColorStop()方法的调用对象并不是绘图环境对象,而是createRadialGradient()方法的返回对象。

    (4).渐变的起点之前和渐变的终点之后填充对应的起点纯色和终点纯色。

    特别说明:如果起点圆的半径大于终点圆的半径,那么就反过来变成从外到内的渐变。

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 北京pc28开奖结果 白小姐一肖一码开 福彩3d 三五图库最快报码 福彩3d专家预测 新浪爱彩网 亚洲秒速时时彩开奖 体彩p5开奖317期 360新时时彩删除 彩票平台如何制作 最长双色球基本走势图 克莉丝汀欢乐生肖月饼 福彩20选5开奖结果 开乐彩开奖视频 重庆百变王牌百宝 pk10三码技巧分享