js+canvas绘制五角星的方法_H5之家 - 中国HTML5教程资源分享第一站

本文实例讲述了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 ></canvas></body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》《JavaScript运动效果与技巧汇总》及《JavaScript数据结构与算法技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:js+canvas简单绘制圆圈的方法
JavaScript+html5 canvas制作的圆中圆效果实例
JavaScript+html5 canvas绘制的小人效果
JavaScript+html5 canvas制作色彩斑斓的正方形效果
JavaScript html5 canvas画布中删除一个块区域的方法
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
JavaScript+html5 canvas制作的百花齐放效果完整实例
JavaScript+html5 canvas绘制渐变区域完整实例
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
js+canvas绘制矩形的方法