<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Rotate to Mouse</title>

    <link rel="stylesheet" href="../include/style.css">

      <style type="text/css">

          .dot{

              position: absolute;

              width: 1px;

              height: 1px;

              background: #000000;

          }

      </style>

  </head>

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>

    <aside>Move mouse on canvas element.</aside>

    <div style="position: relative;width: 200px;height: 200px;margin: 0 auto;border: 1px solid #000000"  id="draw_bo">

    </div>

    <script>

    window.onload = function () {

        var $dom = document.getElementById('draw_bo');

        for(var angle = 0;angle<200;angle +=0.01){//画正弦波

            var chilidDot = document.createElement('div');

            chilidDot.className='dot';

            chilidDot.style.top=100*(Math.sin(angle*Math.PI/100))+"px";

            chilidDot.style.left=angle+"px";

            $dom.appendChild(chilidDot);

        }

    };

    </script>

  </body>

</html>

上所示：

根据 正弦定理  y = sinx

假如：要在长度为  200像素内画一个完整的正弦波形

x左边为长度   x*Math.PI(这个是公式里面的π）/200 进行转化则能保证在200周长内画一个完整的波形

则得出：

chilidDot.style.top=100*(Math.sin(angle*Math.PI/100))+"px";
chilidDot.style.left=angle+"px";
即为 x和y坐标值

javascript图形动画设计--画简单正弦波的更多相关文章

  1. javascript图形动画设计--以简单正弦波轨迹移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. wxWidgets学习笔记——在屏幕上画简单的图形和文字

    在屏幕上画简单图形和显示图片.处理简单鼠标键盘事件 /*************************************************************** * Name: M ...

  3. （转）第02节：在Canvas上画简单的图形

    我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...

  4. 推荐12个最好的 JavaScript 图形绘制库

    众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web  ...

  5. javascript帧动画

    前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...

  6. 【原】移动web动画设计的一点心得——css3实现跑步

    今年3月份,由于公司业务需要,我转岗到微信产品部,离开了TID团队,人都是有感情的动物,更何况在一个团队呆了快 3 年,心中十分舍不得,鬼哥说了“天下没有不散的宴席...”,在我的世界里又多了一次离别 ...

  7. HTML5拓扑图形组件设计之道（一）

    HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...

  8. HT图形组件设计之道（一）

    HT for Web简称HT提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create ...

  9. Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）

    Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...

随机推荐

  1. DevExpress GridControl+UserControl实现分页

    志向不过是记忆的奴隶,生气勃勃地降生,但却很难成长. —— 莎士比亚 时隔一年,我写随笔真的很随意,想起了就来博客园写写,想不起来就任由懒惰支配着我.不过我到觉得这不是什么坏事,你不用为了完成某事而让 ...

  2. 「SDOI2008」洞穴勘测

    题目链接 戳我 \(Solution\) \(LCT\)裸题 \(Connect\)操作,执行\(link(u,v)\) \(Destroy\)操作,执行\(cut(u,v)\) \(Query\)操 ...

  3. MyBatis入门及CRUD

    MyBatis是一个ORM的数据操作框架 myBatis的基本配置 首先创建一个普通 java项目,引入响应jar包,然后引入mybatis的xml配置, <?xml version=" ...

  4. python单引号和双引号的区别

    今天在网上爬虫的时候,很奇怪的发现python的字符串既可以用双引号又可以用单引号,于是就上网百度了一下原因. 原来由于字符串中有可能既有双引号又有单引号,例如: 字符串:demo'1'. 这时候就可 ...

  5. 微信企业号发送监控消息【php】

    公司这边有做监控异常并将消息发送到企业公众号的功能.大概如下: 定时任务检测异常消息 将消息存入redis队列 定时处理队列异常消息 发送到微信企业号对应的部门组 这里我们来看一下微信发送过程,其他不 ...

  6. ZooKeeper学习1---简单介绍

    一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同 ...

  7. 搭建一个ES6开发环境

    一.首先先建立一个项目工程目录,并在目录下建立两个文件夹:src和dist src:书写ES6代码的文件夹,写的js程序都放在这里. dist:利用Babel编译成的ES5代码的文件夹,在HTML页面 ...

  8. P3622 [APIO2007]动物园

    题目链接 题意分析 这是一道状压\(DP\)的题 一个人只可以欣赏到\(5\)只动物 显然可以状压 我们用\(dp[i][j]\)表示当前\([i,i+4]\)中这\(5\)只动物的状态\(j\) 在 ...

  9. SpringMvc redirect

    SpringMVC redirect 核心 首先网上百度到的资源基本已经够用, 留作记录. SpringMVC-redirect重定向跳转传值 虽然这哥们也是转的, 但又没有留源地址. 因此 ... ...

  10. node-redis模块需要注意的事项

    node之中连接redis使用的redis模块,虽然好用,但是有些地方还是需要注意. npm install redis redis client 行为:1.客户端执行过程中断网的情况 由于原本连接正 ...