本文实例讲述了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程序设计有所帮助。
【js+canvas绘制五角星的方法】相关文章：