HTML5 canvas createRadialGradient()放射状/圆形渐变

首页 > 代码库 > HTML5 canvas createRadialGradient()放射状/圆形渐变

HTML5 canvas createRadialGradient()放射状/圆形渐变

2024-08-14 07:44:24 221人阅读

定义和用法

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

原理示意图

技术分享

JavaScript 语法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

实例：

<canvas id="canvas1" width="200" height="200" style="border:1px solid blue;"></canvas><script>    var canvas = document.getElementById(‘canvas1‘);    var ctx = canvas.getContext(‘2d‘);    var grd = ctx.createRadialGradient(100, 100, 5, 100, 100, 100);    grd.addColorStop(0, ‘red‘);    grd.addColorStop(1, ‘white‘);    //使用经向渐变    ctx.fillStyle = grd;    ctx.fillRect(0, 0, canvas.width, canvas.height);</script>

技术分享

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createRadialGradient() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

原理示意说明：

    <canvas id="canvas1" width="400" height="400" style="border:1px solid blue;"></canvas>    <script>        var canvas = document.getElementById(‘canvas1‘);        var ctx = canvas.getContext(‘2d‘);        //当cycle1在cycle2里边时，并且圆心重合        var cycle1 = {            x: 200,            y: 200,            r: 25        };        var cycle2 = {            x: 200,            y: 200,            r: 80        };        ctx.beginPath();        ctx.arc(cycle1.x, cycle1.y, cycle1.r, 0, Math.PI * 2, false);        ctx.stroke();        ctx.beginPath();        ctx.arc(cycle2.x, cycle2.y, cycle2.r, 0, Math.PI * 2, false);        ctx.stroke();        //使用经向渐变        var grd = ctx.createRadialGradient(cycle1.x, cycle1.y, cycle1.r, cycle2.x, cycle2.y, cycle2.r);        grd.addColorStop(0, ‘rgba(255,0,0,0.75)‘);        grd.addColorStop(0.5, ‘rgba(0,255,0,0.75)‘);        grd.addColorStop(1, ‘rgba(0,0,255,0.75)‘);        ctx.fillStyle = grd;        ctx.fillRect(0, 0, 500, 500);    </script>