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

最新推荐文章于 2021-06-03 09:43:09 发布

sensus森森

最新推荐文章于 2021-06-03 09:43:09 发布

阅读量1.6k

点赞数 1

分类专栏： HTML4/HTML5 文章标签：图像合成

本文链接：https://blog.csdn.net/qq_27682041/article/details/72779329

版权

HTML4/HTML5 专栏收录该内容

30 篇文章 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>

效果截图：

sensus森森

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5＜canvas图像合成实例之随机闪烁的星星＞

canvas{ background:#ccc; } window.onload = function(){ var canvas = document.getElementById('canvas'); var cobj = c
复制链接

扫一扫