月亮繁星

最新推荐文章于 2021-06-10 11:41:02 发布

wyystyle

最新推荐文章于 2021-06-10 11:41:02 发布

阅读量98

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/wyystyle/article/details/116207530

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>月亮繁星</title>
    <style>
      *{
            margin: 0;
            padding: 0;
        }
        #canvas { display: block;background: #000;}
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" width="" height="">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>

<script>
    var docW = document.documentElement.clientWidth;
    var dovH = document.documentElement.clientHeight;
    var canvas = document.getElementById('canvas');
    canvas.width=docW;
    canvas.height=dovH;
    var context = canvas.getContext('2d');
    var cw = docW;
    var ch = dovH;
    var arrIndex = [];
    var fn = {
        getx:function(){
            return Math.floor(Math.random()*docW)
        },
        gety:function(){
            return Math.floor(Math.random()*dovH)
        },
        gett:function(){
            return 0.5+Math.floor(Math.random()*1000) 
        },
        geta:function(){
            return Math.floor(Math.random()*10)/10; 
        }
    }
    fillMoon(context, 1, 800, 150, 80, 30);
    
    /**
     * 绘制月亮的方法
     */
    function fillMoon(cxt, d, x, y, R, rot){
        cxt.save();
        cxt.translate(x, y);
        cxt.rotate(rot*Math.PI/180);
        cxt.scale(R, R);
        pathMoon(cxt, d);
        cxt.fillStyle = 'yellow';
        cxt.fill();
        cxt.restore();
    }
    function pathMoon(cxt, d){
        cxt.beginPath();
        cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);
        cxt.moveTo(0, -1);
        cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);
        cxt.closePath();
    }
    
    function dis(x1, y1, x2, y2){
        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
    }

    function Small(x,y,t,a){
        this.x=x;
        this.y=y;
        this.a=a;
        this.dx=0.01;
        arrIndex.push(this);
        // this.update = this.update().bind(this);
    }
    Small.prototype={
        update:function(){
           if(this.a<0.3 || this.a>1){
              this.dx=-this.dx;
           }
           this.a-=this.dx;
        },
        drow:function(){
            context.beginPath();
            for (var i = 0; i < 5; i++) {   
                context.lineTo(Math.cos((18+i*72)/180*Math.PI)*5+this.x, -Math.sin((18+i*72)/180*Math.PI)*5+this.y);   
                context.lineTo(Math.cos((54+i*72)/180*Math.PI)*2+this.x,-Math.sin((54+i*72)/180*Math.PI)*2+this.y);   
            }
            context.closePath();
            context.fillStyle = "rgba(246,241,82,"+this.a+")"; 
            context.fill(); 
            fillMoon(context, 1, 800, 150, 80, 30);
        }
    }
    for(var i=0;i<300;i++){
        new Small(fn.getx(),fn.getx(),fn.gett(),fn.geta())
    }
    fillMoon(context, 1, 800, 150, 80, 30);

    setInterval(function(){
        context.clearRect(0, 0, docW, dovH);
        for(var i=0;i<arrIndex.length;i++){
            arrIndex[i].update()
            if(arrIndex[i]){
                arrIndex[i].drow();
            }
        }
    },20)
</script>
</body>
</html>

wyystyle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
月亮繁星

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>月亮繁星</title> <style> *{ margin: 0; padding: 0; } #canvas { display: block;background:
复制链接

扫一扫