canvas 绘制五角星 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="star()">
<canvas id="canvas" width="800" height="500" style="border: 1px #ccc solid;"></canvas>

</body>
</html>
<script>
    function star(){
        var canvas=document.getElementById("canvas");
        var cxt=canvas.getContext("2d");
        cxt.translate(100,100);
        var s=50;
        cxt.beginPath();
        cxt.fillStyle="blue";
        var x=Math.sin(0);
        var y=Math.cos(0);
        var dig=Math.PI/5*4;
        for(var i=0;i<5;i++){
            var x=Math.sin(i*dig);
            var y=Math.cos(i*dig);
            cxt.lineTo(x*s,y*s);
        }
        cxt.closePath();
        cxt.fill();
    }
</script>


 






 







            

            
posted @ 
2015-12-02 16:38 
cmwang2017 
阅读(262) 
评论(0) 
编辑 
收藏 
举报