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对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
js获取滚动距离的方法
May 30 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
js回调函数仿360开机
Dec 26 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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开发负载均衡指南
2010/07/17 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python Requests 基础入门
2016/04/07 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python实现接口并发测试脚本
2019/06/25 Python
pandas的相关系数与协方差实例
2019/12/27 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
门卫人员岗位职责
2013/12/24 职场文书
初中音乐教学反思
2014/01/12 职场文书
师德学习感言
2014/01/31 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript