<canvas id='cvs'></canvas>
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ... </head>
<body>
</body>
CSS
格式化
#cvs {
border: 1px solid #ccc;
}
JS
格式化
/**
* 计算某个点旋转后的坐标
*
* @param point 旋转的点 {x,y}
* @param angle 旋转的角度
* @param originPoint 基于哪个点旋转,默认值左上角原点{x: 0, y: 0}
* @returns {{x: number, y: number}}
*/
function rotatePoint(point, angle, originPoint = {x: 0, y: 0}) {
const cosA = Math.cos(angle * Math.PI / 180);
const sinA = Math.sin(angle * Math.PI / 180);
const rx = originPoint.x + (point.x - originPoint.x) * cosA - (point.y - originPoint.y) * sinA;
const ry = originPoint.y + (point.x - originPoint.x) * sinA - (point.y - originPoint.y) * cosA;
return { x: rx,y: ry };
}
const cvs = document.getElementById('cvs');
cvs.width = 300;
cvs.height = 300;
const ctx = cvs.getContext("2d");
function drawPoint(p) {
ctx.beginPath();
ctx.arc(p.x,p.y, 2, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fill();
}
let center = { x: 150, y: 150}
let start_point = { x:center.x + 50, y:center.y };
let start_angle = 90;
let count = 8;
let single_angle = 360/count
drawPoint(center);
for(let i = 0; i< count; i++){
const p = rotatePoint(start_point, start_angle + single_angle * i, center)
drawPoint(p);
console.log(p.x, p.y);
}