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