首页 > 代码库 > canvas学习绘制渐变色

canvas学习绘制渐变色

2024-09-04 20:43:36   220人阅读

1.createLinearGradient() 创建线性渐变

//Linear adj. 直线的 线性的

//Gradient n. 梯度 变化率

createLinearGradient(x1,y1,x2,y2)——颜色渐变的起始坐标和终点坐标

addColorStop(位置,"颜色值")——0表示起点...插入点...1表示终点，配置颜色停止点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        canvas{background:#A9A9A0;}
    </style>
</head>
<body>
    <canvas id="bcanvas" width="800" height="800">
        您的浏览器暂不支持HTML5的canvas元素
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById(‘bcanvas‘);
        var pi=canvas.getContext(‘2d‘);
        g=pi.createLinearGradient(250,250,550,550);
        g.addColorStop(0,"#000000");
        g.addColorStop(0.25,"red");
        g.addColorStop(0.5,"yellow");
        g.addColorStop(0.75,"green");
        g.addColorStop(1,"#FFFFFF");
        pi.lineWidth=2;
        pi.strokeStyle="yellow";
        pi.fillStyle=g;
        pi.moveTo(400,500);
        pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
        pi.closePath();
        pi.fill();

        pi.beginPath();
        pi.strokeStyle="orange";
        pi.fillStyle="#A9A9A0";
        pi.moveTo(400,500);
        pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);
        pi.closePath();
        pi.fill();

        pi.beginPath();
        pi.lineWidth=1;
        pi.strokeStyle="green";
        pi.fillStyle="red";
        pi.font="60px 隶书";
        pi.strokeText("纵",375,270);
        pi.fillText("横",375,340);
        pi.strokeText("横",375,340);
    </script>
</body>
</html>

线性渐变测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas学习渐变</title>
    <style type="text/css">
        canvas{background:#A9A9A0;}
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var c=canvas.getContext(‘2d‘);
        c.beginPath();
        g=c.createLinearGradient(0,110,250,110);
        g.addColorStop(0,"blue");
        g.addColorStop(0.25,"#FFFFFF");
        g.addColorStop(0.4,"#8f4b2e");
        g.addColorStop(0.7,"red");
        g.addColorStop(1,"yellow");
        c.fillStyle=g;
        c.fillRect(0,0,250,250);

        c.beginPath();
        g=c.createLinearGradient(250,0,250,250);
        g.addColorStop(0,"blue");
        g.addColorStop(0.25,"#FFFFFF");
        g.addColorStop(0.4,"#8f4b2e");
        g.addColorStop(0.7,"red");
        g.addColorStop(1,"yellow");
        c.fillStyle=g;
        c.fillRect(250,0,250,250);

        c.beginPath();
        g=c.createLinearGradient(125,250,0,500);
        g.addColorStop(0,"orange");
        g.addColorStop(0.25,"red");
        g.addColorStop(1,"yellow");
        c.fillStyle=g;
        c.fillRect(0,250,250,250);

        c.beginPath();
        g=c.createLinearGradient(250,250,250,500);
        g.addColorStop(0,"blue");
        g.addColorStop(0.1,"white");
        g.addColorStop(0.2,"brown");
        g.addColorStop(0.4,"red");
        g.addColorStop(1,"yellow");
        c.fillStyle=g;
        c.fillRect(250,250,250,250);
    </script>
</body>
</html>

 

2.createRadialGradient(x1,y1,r1,x2,y2,r2)（起始圆心，终止圆心） 创建放射状/环形的渐变

//Radial adj. 径向的 放射式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas放射式渐变</title>
    <style type="text/css">
        canvas{background:#A9A9A0;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600">
        您的浏览器暂不支持HTML5的canvas元素
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var c=canvas.getContext(‘2d‘);
//        g=c.createRadialGradient(50,300,0,700,300,150);
//        g.addColorStop(0,"blue");
//        g.addColorStop(0.25,"#FFFFFF");
//        g.addColorStop(0.4,"#8f4b2e");
//        g.addColorStop(0.7,"red");
//        g.addColorStop(1,"yellow");
//        c.fillStyle=g;
//        c.fillRect(50,50,700,500);
        g=c.createRadialGradient(400,300,10,400,300,200);
        g.addColorStop(0,"blue");
        g.addColorStop(0.25,"#FFFFFF");
        g.addColorStop(0.4,"#8f4b2e");
        g.addColorStop(0.7,"red");
        g.addColorStop(1,"yellow");
        c.fillStyle=g;
        c.arc(400,300,200,0,Math.PI*2);
        c.fill();
    </script>
</body>
</html>

 

绘画太极

 

canvas学习绘制渐变色


联系
我们