本文實例講述了js+canvas繪制五角星的方法。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>canvas繪制五角星 </title> <script type="text/javascript" > window.onload = function () { var canvas = document.getElementById("canvas"); if (canvas) { var context = canvas.getContext("2d"); drawStar(context, 50, 100, 100); } else { document.writeln("瀏覽器不支持canvas組件"); } } function drawStar(context, r, x, y) { context.lineWidth = 5; context.beginPath(); var dit = Math.PI * 4 / 5; var sin = Math.sin(0) * r + y; var cos = Math.cos(0) * r + x; console.log(0+":"+0); context.moveTo(cos, sin); for (var i = 0; i < 5; i++) { var tempDit = dit * i; sin = Math.sin(tempDit) * r + y; cos = Math.cos(tempDit) * r + x; context.lineTo(cos, sin); console.log(sin+":"+sin+":"+tempDit); } context.closePath(); context.strokeStyle = "red"; context.fillStyle = "#DDDDDD"; context.fill(); } </script></head><body><canvas id="canvas" ></canvas></body></html>更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript動畫特效與技巧匯總》《JavaScript運動效果與技巧匯總》及《JavaScript數據結構與算法技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
