html5＜canvas图像合成实例之随机闪烁的星星＞

浅浅的花香味﹌ 2022-06-15 07:26 260阅读 0赞

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
                canvas{
                    background:#ccc;
                }
            </style>
            <script>
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var cobj = canvas.getContext('2d');//获取绘图环境
                var angle = 0;
                var starArr = [];
    
                //生成50个星星对象，并压入数组中
                for (var i = 0; i < 50; i++){
                    var starObj={
                        radius1:20+10*Math.random(),radius2:7+8*Math.random(),x:30+(canvas.width-60)*Math.random(),y:30+(canvas.height-60)*Math.random(),num:Math.ceil(5+3*Math.random()),color:"rgb("+parseInt(255*Math.random())+","+parseInt(255*Math.random())+","+parseInt(255*Math.random())+")",angle:360*Math.random(),changeAngle:-5+10*Math.random()
                    };
                    starArr.push(starObj);
                };
    
    
                setInterval(function(){
                    cobj.clearRect(0, 0, 500, 500);
                    //遍历数组生成50个星星
                    for(var i = 0; i < starArr.length; i++){
                        starArr[i].angle += starArr[i].changeAngle;                   
                        cobj.save();
                        cobj.beginPath();
                        cobj.translate(starArr[i].x, starArr[i].y);
                        cobj.rotate(starArr[i].angle*Math.PI/180);
                        cobj.scale(Math.sin(starArr[i].angle*Math.PI/180), Math.sin(starArr[i].angle*Math.PI/180));
                        cobj.globalAlpha = Math.abs(Math.sin(starArr[i].angle*Math.PI/180));//因为sin有正副，所以取绝对值
                        drawStar(0,0,starArr[i].radius1,starArr[i].radius2,starArr[i].num,'fill',starArr[i].color);
                        cobj.restore();
                    }
                },60)
                //产生6位随机数
                function MathRand(){
                    var Num="";
                    for(var i=0;i<6;i++){
                        Num+=Math.floor(Math.random()*10);
                    }
                    return Num;
                }
                //绘制规则多边形（x坐标，y坐标，半径1，半径2，几角，填充类型，颜色）
                function drawStar(x,y,radius1,radius2,num,drawType,color){
                    var angle = 360/(2*num);
                    var arr = [];
                    for(var i=0;i<2*num;i++){
                        var starObj = {};
                        if(i%2 == 0){
                            starObj.x = x+radius1*Math.cos(i*angle*Math.PI/180);
                            starObj.y = y+radius1*Math.sin(i*angle*Math.PI/180);
                        }else{
                            starObj.x = x+radius2*Math.cos(i*angle*Math.PI/180);
                            starObj.y = y+radius2*Math.sin(i*angle*Math.PI/180);
                        }
                        arr.push(starObj);
                    }
    
                    cobj.beginPath();
                    cobj.fillStyle = color;
                    cobj.strokeStyle = color;
                    cobj.moveTo(arr[0].x, arr[0].y);//起始点
                    for(var i=0;i<arr.length;i++){
                        cobj.lineTo(arr[i].x,arr[i].y);//终点
                    }
                    cobj.closePath();
                    if(drawType == 'fill'){
                        cobj.fill();
                    }else{
                        cobj.stroke();
                    }
                }
            }
            </script>
           
        </head>
        <body>
        <canvas id="canvas" width=500 height=500>
        </canvas>
        </body>
    
    </html>

效果截图：

![20171213114024482][]

[20171213114024482]: /images/20220615/43e403775cc441d493d5387e1b2707e1.png