canvas中的渐变

线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文,绘图环境

        //0,0 第一个点  300,300 第二个点
        var myliGra=ctx.createLinearGradient(0,0,300,300);
        //上述线条的0%位置为pink
        myliGra.addColorStop(0,"pink");
        //上述线条的100%位置为pink
        myliGra.addColorStop(1,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.fillRect(0,0,300,300);

    
    </script>
</body>
</html>

 

给圆填充好看的线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文,绘图环境

        //0,0 第一个点  300,300 第二个点
        var myliGra=ctx.createLinearGradient(0,0,300,300);
        //给渐变分配颜色
        myliGra.addColorStop(0,"rgb(255,175,74)");
        myliGra.addColorStop(.5,"rgb(255,191,196)");
        myliGra.addColorStop(1,"rgb(173,216,230)");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.arc(150,150,150,0,2*Math.PI,true);
        ctx.fill();

    
    </script>
</body>
</html>

 

 

改变线性渐变的角度,可以通过改变两个点的坐标来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文,绘图环境

        //0,0 第一个点  300,300 第二个点
        var myliGra=ctx.createLinearGradient(150,0,150,300);
        //上述线条的0%位置为pink
        myliGra.addColorStop(0,"pink");
        //上述线条的100%位置为pink
        myliGra.addColorStop(1,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.fillRect(0,0,300,300);

    
    </script>
</body>
</html>

 

径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文,绘图环境

        //150,150,0 第一个圆的圆心和半径
        //150,150,150 第二个圆的圆心和半径
        var myliGra=ctx.createRadialGradient(150,150,0,150,150,150);
        //给渐变分配颜色
        myliGra.addColorStop(1,"pink");
        myliGra.addColorStop(0,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.arc(150,150,150,0,2*Math.PI,true);
        ctx.fill();

    
    </script>
</body>
</html>

 

 

径向渐变的角度调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文,绘图环境

        //150,150,0 第一个圆的圆心和半径
        //150,150,150 第二个圆的圆心和半径
        var myliGra=ctx.createRadialGradient(150,30,0,150,150,150);
        //给渐变分配颜色
        myliGra.addColorStop(1,"pink");
        myliGra.addColorStop(0,"purple");
        //将该渐变设置为填充样式
        ctx.fillStyle=myliGra;
        //绘制矩形
        ctx.arc(150,150,150,0,2*Math.PI,true);
        ctx.fill();

    
    </script>
</body>
</html>

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页