HTML5简明教程-1.1.4.HTML5Canvas参考手册 之 放射渐变 createRadialGradient

本文连接:http://blog.csdn.net/tomorrow13210073213/article/details/42486639

转载请注明出处


在前一篇博文中我们介绍过HTML5的canvas为我们提供了绘制线性渐变的相关方法,本篇中我们会介绍HTML5的另一种渐变,放射渐变。创建放射渐变的方法是createRadialGradient()。与线性渐变相同,用createRadialGradient()方法可以创建基于画布的线性渐变,创建好的线性渐变可以用于填充路径、定义笔触等。


方法:createRadialGradient()
方法名:createRadialGradient()
方法描述:用于创建基于整个画布的放射渐变,该渐变可以用于填充路径或定义笔触(作为属性fillStyle或strokeStyle的值)
js语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);
       参数:x0:渐变的开始圆的 x 坐标,
       参数:y0:渐变的开始圆的 y 坐标,
       参数:r0:开始圆的半径,
       参数:x1:渐变的结束圆的 x 坐标,
       参数:y1:渐变的结束圆的 y 坐标,
       参数:r1:结束圆的半径
浏览器兼容:IE 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法。
使用注意:(1)获得渐变对象后,我们要使用 addColorStop() 方法规定不同的颜色,以及在渐变对象中的何处定位颜色。关于该方法,另有博文详述。
(2)我们用createRadialGradient()方法定义的渐变是基于整个canvas的,仅仅通过定义该渐变是看不到的,将该渐变定义为属性fillStyle或strokeStyle的值后,我们实际是将路径定义的矩形(面或笔触)、圆形(面或笔触)部分的渐变显示出来。


createRadialGradient()方法的定义及应用与createLinearGradient()基本相同,仅仅由于两者定义的渐变类型不同,其参数有所不同。


下面是我们的测试代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Html5 Canvas createLinearGradient</title>
    <style type="text/css">
        body {
            margin: 0px;
            width: 440px;
        }
        canvas {
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        .radius {
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <!--
       createRadialGradient() 方法创建放射状/圆形渐变对象。
       与createLinearGradient()相同,渐变可用于填充矩形、圆形、线条、文本等等。
       该对象一般作为 strokeStyle 或 fillStyle 属性的值。
       用方法 addColorStop() 规定不同的颜色,以及在 gradient 对象中的何处定位颜色。
       语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);
       参数:x0:渐变的开始圆的 x 坐标,
       参数:y0:渐变的开始圆的 y 坐标,
       参数:r0:开始圆的半径,
       参数:x1:渐变的结束圆的 x 坐标,
       参数:y1:渐变的结束圆的 y 坐标,
       参数:r1:结束圆的半径
   -->
    <canvas id="can" width="100" height="100"></canvas>
    <canvas id="can2" width="100" height="100" class="radius"></canvas>
    <canvas id="can3" width="100" height="100"></canvas>
</body>
<script type="text/javascript">
    //左上角到右下角的渐变
    var c = document.getElementById('can');
    var cC = c.getContext('2d');
    //参数:(渐变的开始圆的 x 坐标,渐变的开始圆的 y 坐标,开始圆的半径,渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标,结束圆的半径)
    var rg = cC.createRadialGradient(50, 50, 10, 50, 50, 50);
    rg.addColorStop(0, 'red');
    rg.addColorStop(1, 'yellow');
    cC.fillStyle = rg;
    cC.fillRect(0, 0, 100, 100);

    var c2 = document.getElementById('can2');
    var cC2 = c2.getContext('2d');
    var rg2 = cC2.createRadialGradient(50, 50, 10, 50, 50, 50);
    rg2.addColorStop(0, 'red');
    rg2.addColorStop(1, 'yellow');
    cC2.fillStyle = rg2;
    cC2.fillRect(0, 0, 100, 100);

    var c3 = document.getElementById('can3');
    var cC3 = c3.getContext('2d');
    var rg3 = cC3.createRadialGradient(0, 0, 80, 0, 0, 100);
    rg3.addColorStop(0, 'yellow');
    rg3.addColorStop(1, 'red');
    cC3.fillStyle = rg3;
    cC3.fillRect(0, 0, 100, 100);
</script>

</html>

下面是测试效果图:

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。