• Canvas createRadialGradient 线性渐变【每日一段代码22】


    <!DOCTYPE HTML>
    <html>
    <head>
    <title>createRadialGradient</title>
    <script type="text/javascript">
    function draw(){
    var cxt = document.getElementById("myCanvas").getContext("2d");
    //创建渐变
    var radgrad = cxt.createRadialGradient(45,45,10,52,50,30);
    radgrad.addColorStop(0,'#A7D30C');
    radgrad.addColorStop(0.9,'#019F62');
    radgrad.addColorStop(1,'rgba(1,159,98,0)');

    var radgrad2 = cxt.createRadialGradient(105,105,20,112,120,50);
    radgrad2.addColorStop(0,'#FF5F98');
    radgrad2.addColorStop(0.75,'#FF0188');
    radgrad2.addColorStop(1,'rgba(255,1,136,0)');

    var radgrad3 = cxt.createRadialGradient(95,15,15,102,20,40);
    radgrad3.addColorStop(0,'#00C9FF');
    radgrad3.addColorStop(0.8,'#00B5E2');
    radgrad3.addColorStop(1,'rgba(0,201,255,0)');

    var radgrad4 = cxt.createRadialGradient(0,150,50,0,140,90);
    radgrad4.addColorStop(0,'#F4F201');
    radgrad4.addColorStop(0.8,'#e4C700');
    radgrad4.addColorStop(1,'rgba(228,199,0,0)');
    //绘制图形
    cxt.fillStyle=radgrad4;
    cxt.fillRect(0,0,150,150);
    cxt.fillStyle=radgrad3;
    cxt.fillRect(0,0,150,150);
    cxt.fillStyle=radgrad2;
    cxt.fillRect(0,0,150,150);
    cxt.fillStyle=radgrad;
    cxt.fillRect(0,0,150,150);
    }
    </script>
    </head>
    <body onLoad="draw()">
    <canvas id="myCanvas" height="150" width="150" style="border:2px solid #06c;"></canvas>
    </body>
    </html>

    显示效果如下:

    createRadialGradient(x1,y1,r1,x2,y2,r2),方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。实例中定义了 4 个不同的径向渐变。由于可以控制渐变的起始与结束点,所以可以实现一些比(如在 Photoshop 中所见的)经典的径向渐变更为复杂的效果。经典的径向渐变是只有一个中心点,简单地由中心点向外围的圆形扩张。此例中起点稍微偏离终点,这样可以达到一种球状 3D 效果。但最好不要让里圆与外圆部分交叠。4 个径向渐变效果的最后一个色标都是透明色。如果想要两色标直接的过渡柔和一些,只要两个颜色值一致就可以了。代码里面看不出来,是因为我用了两种不同的颜色表示方法,但其实是相同的#019F62 = rgba(1,159,98,1)。】

  • 相关阅读:
    PS只能各个工具使用的注意知识点
    怎样利用自动化工具做真实的项目
    抖音视频、新浪微博、今日头条、拼多多砍价 、淘宝业务、快手、小红书、大众点评刷数据
    前端开源实战项目推荐
    提问的智慧
    论程序员为何加班—我的工作日常
    大白话入门 Spring Cloud
    Java 书单
    Spring Boot 经典开源项目推荐
    Flash 终将谢幕:微软将于年底( 2020 年 )停止对 Flash 的支持
  • 原文地址:https://www.cnblogs.com/naokr/p/2357657.html
Copyright © 2020-2023  润新知