问答详情
源自：4-1 画一片星空

我的为什么效果没有星星呢==明明和老师的差不多，到底哪里出错鸟==

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>star</title>
    <style>
    canvas{
        border: solid 1px black; 
        display: block;
    }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <!-- // <script src="../js/star.js"></script> -->
    <script>
    
    window.onload=function(){
        var can=document.getElementById("canvas");
        var ctx=can.getContext("2d");
        var w=can.width;
        var h=can.height;

        ctx.fillStyle="black";
        ctx.fillRect(0, 0, w, h);
        for(var i=0;i<20;i++)
        {

            var r=Math.random()*10+10;
            var x=Math.random()*w;
            var y=Math.random()*h;
            var a=Math.random()*360;

            drawStar(ctx,x,y,r,r/2.0,a);
        }
        // drawStar(ctx,400,400,300,150,30);
    }
    function drawStar(ctx,x,y,R,r,rot){
        ctx.beginPath();
        for(var i=0;i<5;i++)
        {
            ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
                       -Math.sin((18+i*72-rot)/180*Math.PI)*R+x);
            ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+y,
                       -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
        }
        ctx.closePath();
        ctx.lineWidth=10;
        ctx.fillStyle="#fb3";
        ctx.strokeStyle="#fb5";

        ctx.fill();
        ctx.stroke();
        

    }

    </script>
</body>
</html>


提问者：qq_胖漏漏_0 2016-06-12 13:21

个回答

  • Arya丶
    2016-06-12 14:55:06
    已采纳

    x y那有问题

    1
  • Arya丶
    2016-06-12 16:42:18


     ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
                       -Math.sin((18+i*72-rot)/180*Math.PI)*R+x);
            ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+y,
                       -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);

    这里的x y  位置不对哦

    0