标签：
<!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 src="../include/utils.js"></script> <script src="./classes/arrow.js"></script> <script> window.onload = function () { var canvas = document.getElementById(‘canvas‘), context = canvas.getContext(‘2d‘), mouse = utils.captureMouse(canvas), arrow = new Arrow(); arrow.x = canvas.width / 2; arrow.y = canvas.height / 2; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); var dx = mouse.x - arrow.x, dy = mouse.y - arrow.y; arrow.rotation = Math.atan(dy/dx);//Math.atan2(dy, dx); //radians arrow.draw(context); }()); 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坐标值
标签：
原文地址：http://www.cnblogs.com/rubyxie/p/4606151.html
