canvas绘制五角星 

<!DOCTYPE html>
<html>
<head>
    <title>canvas绘制五角星</title>
    <style type="text/css">
        .wrap{width: 500px;margin:0 auto;}
        #starCanvas{border: 1px solid #ccc;width: 500px;height:500px;box-sizing:border-box;}
    }
    }
    </style>
</head>
<body>
<div class="wrap">    
    <canvas id='starCanvas' width='500px' height="500px"></canvas>
</div>
<script type="text/javascript">
    drawStar(250,250,100);
    function drawStar(cx,cy,r){
        var dotArray=starDotArray(cx,cy,r);
        console.log(dotArray);
        var canvas=document.getElementById('starCanvas');
        var cx=canvas.getContext('2d');
        cx.strokeStyle='red';
        cx.lineJoin='round';
        for(var i=0;i<dotArray.length;i++){
            if(i==0){
                cx.moveTo(dotArray[i].x,dotArray[i].y);
            }else{
                cx.lineTo(dotArray[i].x,dotArray[i].y);
            }
            
        }
        cx.closePath();
        cx.stroke();
        //cx.fillStyle='yellow'
        //cx.fill();
    }
    function starDotArray(cx,cy,r){
        //圆心坐标 以及圆半径
        var dotArray=[];
        var unitDeg=Math.PI * 4 / 5;
        var rotateDeg=unitDeg/8;
        for(var i=0;i<5;i++){
            var tempDit=unitDeg*i-rotateDeg;
            var y = Math.sin(tempDit) * r + cy;
            var x = Math.cos(tempDit) * r + cx;
            dotArray.push({x:x,y:y});
        }
        return dotArray;
    }
</script>
</body>
</html>

如有疑问，望不吝赐教1609020856@qq.com

 

posted @ 2017-06-14 15:52  前端技术总结  阅读(985)  评论(0)    收藏  举报