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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Python中的默认参数详解
2015/06/24 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python如何实现单链表的反转
2020/02/10 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
会计电算化专业求职信
2014/06/10 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
公司放假通知范文
2015/04/14 职场文书
公司借款担保书
2015/09/22 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
mysql函数之截取字符串的实现
2022/08/14 MySQL