canvas绘制径向渐变 – 学习画板

首页 » HTML » canvas绘制径向渐变

canvas绘制径向渐变

HTML5中canvas元素除了绘制线性渐变以外,还可以绘制径向渐变。径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。比如在描绘太阳是,沿着太阳的半径方向向外扩散出去的光晕,就是一种径向渐变。

createRadialGradient在html5的应用

canvas绘制径向渐变的脚本文件:

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script>
    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) return false;
        var context = canvas.getContext('2d');
        var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
        g1.addColorStop(0.1, 'rgb(255,255,0)');
        g1.addColorStop(0.3, 'rgb(255,0,255)');
        g1.addColorStop(1, 'rgb(0,255,255)');
        context.fillStyle = g1;
        context.fillRect(0, 0, 400, 300);
        var n = 0;
        var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
        g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
        g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
        g2.addColorStop(1, 'rgba(0,0,255,0.5)');
        for (var i = 0; i < 10; i++) {
            context.beginPath();
            context.fillStyle = g2;
            context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();
        }
    }
</script>
</head>
<body onLoad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

createRadialGradient() 方法创建一条放射颜色渐变,这个方法创建并返回了一个新的 CanvasGradient 对象,该对象在两个指定圆的圆周之间放射性地插值颜色。

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

xStart, yStart 开始圆的圆心的坐标,radiusStart 开始圆的直径,xEnd, yEnd 结束圆的圆心的坐标,radiusEnd 结束圆的直径。

上面的实例中,分别指定了两个圆的大小和位置。从第一个圆的圆心处像外进行扩散渐变,一直扩散到第二个圆的外轮廓出。

在设定颜色时,与线性渐变相同,使用addColorStop方法进行设定即可。同样也需要设定0-1之间的浮点数来作为渐变转折点的偏移量。

此文章发表在 HTML 标签为 . 将固定链接加入收藏.