找回密码
当前位置：前端开发者 > JavaScript > 正文

Web前端开发解析三角函数

2018-08-22 19:13:23 分类：JavaScript 阅读(142) 评论(0)

web前端开发谷歌插件 idea 开发前端的插件 前端掌握开发技能描述

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>

前端开发技术语言 前端开发获取手机验证码 前端开发实训总结

» 本文来自：前端开发者 » 《Web前端开发解析三角函数》
» 本文链接地址：https://www.rokub.com/5368.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论