canvas 正五角星如何画
看网站有这个，但看不懂怎么画的，请大牛指教
lechenging浏览 4259回答 1
1回答
-
freeeWilll
给你一个正五角星的画法示例吧。如下：<!doctype html> <html> <head> </head> <body> <canvas id="canvas" style="border:1px solid black;display:block;margin:50px auto;"></canvas> <script> window.onload=function() { var cvs=document.getElementById('canvas'); var cxt=cvs.getContext('2d'); cvs.width=800; cvs.height=800; drawStar(cxt,80,300,400,400,30); function drawStar(cxt,r,R,x,y,rot) { cxt.beginPath(); for(var i=0;i<5;i++) { cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y); } cxt.closePath(); } cxt.lineWidth=10; cxt.stroke(); } </script> </body> </html>
随时随地看视频慕课网APP
相关分类
Html5