js+canvas绘制五角星的方法


Posted in Javascript onJanuary 28, 2016

本文实例讲述了js+canvas绘制五角星的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

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 Math.random()随机数函数
Nov 04 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
React组件refs的使用详解
Feb 09 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 #Javascript
js判断上传文件后缀名是否合法
Jan 28 #Javascript
Angular中$compile源码分析
Jan 28 #Javascript
实例讲解JS中setTimeout()的用法
Jan 28 #Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 #Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 #Javascript
基于javascript实现动态显示当前系统时间
Jan 28 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python os.fork() 循环输出方法
2019/08/08 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
pytorch中index_select()的用法详解
2021/01/06 Python
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
考研英语复习计划
2015/01/19 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
教师节主持词开场白
2015/05/29 职场文书
教师廉政准则心得体会
2016/01/20 职场文书