码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 绘制五角星

时间:2015-12-02 18:19:15      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 


 

canvas 绘制五角星

标签:

原文地址:http://www.cnblogs.com/bm20131123/p/5013427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!