前端开发者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
评论前必须登录！
注册