canvas——js画多边形方法

来源:互联网 发布:linux java dlog.path 编辑:程序博客网 时间:2024/06/06 01:04

代码如下:

<div>    <canvas id="aa" height="280" width="400"></canvas></div>

<script>    var aa=document.getElementById("aa").getContext("2d");    aa.shadowBlur=6;    aa.shadowColor="gray";    aa.shadowOffsetX=7;    aa.shadowOffsetY=5;    function createStar(context,n,dx,dy,size){        context.beginPath();        var dig=Math.PI/n*4;        context.moveTo(dx,size+dy);        for(var i=0;i<=n;i++){            var x=Math.sin(i*dig);            var y=Math.cos(i*dig);            context.lineTo(x*size+dx,y*size+dy);        }        context.fill();        context.closePath();    }    aa.fillStyle="red";    createStar(aa,3,60,60,50);    aa.fillStyle="green";    createStar(aa,5,160,60,50);    aa.fillStyle="blue";    createStar(aa,7,260,60,50);    aa.fillStyle="orange";    createStar(aa,9,360,60,50);</script>
效果图如下:



原创粉丝点击