js+canvas绘制五角星的方法
2016-01-28 00:00
1201 查看
本文实例讲述了js+canvas绘制五角星的方法。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript动画特效与技巧汇总》《JavaScript运动效果与技巧汇总》及《JavaScript数据结构与算法技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
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绘制矩形的方法
运行效果截图如下:
具体代码如下:
<!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程序设计有所帮助。
您可能感兴趣的文章:
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绘制矩形的方法
相关文章推荐
- JavaScript黑洞数字之运算路线查找算法(递归算法)实例
- 基于javascript实现checkbox复选框实例代码
- JavaScript统计字符串中每个字符出现次数完整实例
- 谈一谈javascript闭包
- js+canvas简单绘制圆圈的方法
- js+canvas绘制矩形的方法
- 基于JavaScript的操作系统你听说过吗?
- Javascript复制实例详解
- 探讨JavaScript语句的执行过程
- JS prototype笔记
- JS构造函数模式和原型模式笔记
- js瀑布流,实现图片自适应显示
- bean和json相互转换的工具(基于谷歌的gson)
- JavaScript 权威指南学习记录
- js正则表达式
- EL+servlet+jsp实现简单的投票程序版本二
- Three.js typescript definitely typed 文件
- Swipe JS – 移动WEB页面内容触摸滑动类库
- js 自定义滑块 实现文字滚动+透明度变化
- Javascript异步编程的4种方法