html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 三角函数 </title>
- <style>
- html,body{
- margin: 0;
- overflow: hidden;
- }
- canvas{
- cursor: none;
- background: #000;
- }
- div{
- position: absolute;
- left: 0;
- top: 0;
- padding: 15px;
- color: #fff;
- }
- </style>
- </head>
- <body>
- <div></div>
- <canvas></canvas>
- <script>
- window.onfocus = function(){
- var can = document.querySelector('canvas');
- var ctx = can.getContext('2d');
- var ww = window.innerWidth;
- var wh = window.innerHeight;
- can.width = ww;
- can.height = wh;
- ctx.strokeStyle = '#fff';
- ctx.fillStyle = '#fff';
- ctx.lineWidth = 2;
- var x,y;
- can.onmousemove = function (e){
- x = e.clientX;
- y = e.clientY;
- w = ww / 2;
- h = wh / 2;
- dx = x - w;
- dy = y - h;
- //draw
- ctx.clearRect(0,0,ww,wh);
- //center
- // ctx.beginPath();
- // ctx.arc(w,h,2,0,Math.PI*2);
- // ctx.fill();
- // ctx.closePath();
- //mouse
- ctx.beginPath();
- ctx.arc(x,y,2,0,Math.PI*2);
- ctx.fill();
- ctx.closePath();
- //angle
- ctx.beginPath();
- ctx.moveTo(w,h);
- ctx.arc(w,h,20,0,Math.atan2(dy,dx));
- ctx.lineTo(w,h);
- ctx.fill();
- ctx.closePath();
- //line
- /* 横中线 */
- ctx.moveTo(0,h);
- ctx.lineTo(ww,h);
- /* 竖中线 */
- ctx.moveTo(w,0);
- ctx.lineTo(w,wh);
- /* 两点间线 */
- ctx.moveTo(x,y);
- ctx.lineTo(w,h);
- ctx.stroke();
- /* 辅助竖线 */
- ctx.moveTo(x,y);
- ctx.lineTo(x,h);
- /* 辅助横线 */
- // ctx.moveTo(x,y);
- // ctx.lineTo(w,y);
- ctx.stroke();
- ctx.strokeText('R',(dx)/2+w,dy/2+h-10);
- ctx.strokeText('X',(dx)/2+w,h-10);
- ctx.strokeText('Y',x-10,dy/2+h);
- //show
- var str = '';
- str += 'R:' + Math.sqrt( dx * dx + dy * dy ) + '<br>';
- str += 'X:' + dx + '<br>';
- str += 'Y:' + dy + '<br>';
- str += '弧度:' + Math.atan2(dy,dx) + '<br>';
- str += '角度:' + Math.atan2(dy,dx)/Math.PI*180 + '(deg)' + '<br>';
- document.querySelector('div').innerHTML = str;
- }
- window.onfocus = null;
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/32244/d25930a6eb0af4a3f9e9c2739a686c66.html