本文实例讲述了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程序设计有所帮助。
新闻热点
疑难解答
