canvas 实现简单的图像扩散-蒲公英云

canvas 实现简单的图像扩散

灰太狼 2022-06-09 12:55 263阅读 0赞

canvas 实现简单的图像扩散

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var x1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10;
var lc1="#EE7942";lc2="#EE2C2C";lc3="#CD6839";
var lr1,lr2,lr3;
drawarc(15,"#CAE1FF",1);
drawarc(25,"#98FB98",2);
drawarc(25,"#757575",3);
drawarc(30,"#000000",1);
drawarc(35,"#32CD32",2);
drawarc(50,"#6959CD",3);
drawarc(45,"red",1);
drawarc(50,"#fff",2);
drawarc(65,"#000",3);
function drawarc(radiu,ecolor,type){
        var grd;
        var x,y,r;
        var scolor;
            switch(type){
                case 1:
                    x=x1;
                    y=y1;
                    r=lr1;
                    lr1=radiu;
                    scolor=lc1;
                break;
                case 2:
                    x=x2;
                    y=y2;
                    r=lr2;
                    lr2=radiu;
                    scolor=lc2;
                break;
                case 3:
                    x=x3;
                    y=y3;
                    r=lr3;
                    lr3=radiu;
                    scolor=lc3;
                  break;
                default:
            }
        grd=cxt.createRadialGradient(x,y,r,x,y,radiu);
        grd.addColorStop(0,scolor);
        grd.addColorStop(1,ecolor);
        cxt.fillStyle=grd;
        cxt.beginPath();
        cxt.arc(x,y,radiu,0,360,false);
        cxt.closePath();
        cxt.fill();
}
</script>
</body>
</html>