108 lines
3.1 KiB
HTML
108 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<body>
|
|
|
|
<canvas id="myCanvas" width="1850" height="950" style="border:1px solid #d3d3d3;">
|
|
Your browser does not support the HTML5 canvas tag.</canvas>
|
|
|
|
<script>
|
|
function rad(degrees) {
|
|
var pi = Math.PI;
|
|
return degrees * (pi / 180);
|
|
}
|
|
|
|
|
|
var c = document.getElementById("myCanvas");
|
|
var ctx = c.getContext("2d");
|
|
|
|
var sides = 5;
|
|
var r = 250;
|
|
var rot = Math.round((sides - 2) * 180 / sides * 2)
|
|
var piv = 360 / sides;
|
|
var angle = 120;
|
|
|
|
startx = 1850/2//1875/2;
|
|
starty = 950/2//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
|
|
|
|
var stt = 0.5 * Math.PI - rad(rot) + rad(angle);
|
|
var end = 0;
|
|
|
|
for (let j = 0; j < 14; j++) {
|
|
setTimeout(() => {
|
|
|
|
for (let i = 1; i < sides + 1; i++) {
|
|
end = stt + rad(rot);
|
|
ctx.beginPath();
|
|
ctx.arc(startx + Math.cos(rad(90 + piv * i + angle)) * r, starty + Math.sin(rad(90 + piv * i + angle)) * r, r, stt, end, 0);
|
|
//ctx.arc(startx+ 200*i, starty, r, stt, end ,0);
|
|
ctx.strokeStyle = "black";
|
|
ctx.stroke();
|
|
stt = end + -(rad(rot - piv));
|
|
}
|
|
angle += j;
|
|
|
|
}, 100 * j);
|
|
|
|
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
|
|
|
}
|
|
/*
|
|
sides = 6;
|
|
r = 700;
|
|
rot = Math.round((sides - 2)*180/sides*2)
|
|
piv = 360/sides;
|
|
|
|
width = Math.cos(30*Math.PI/180)*r*2;
|
|
|
|
startx = 1500//1875/2;
|
|
starty = 1500//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
|
|
|
|
stt =0.5*Math.PI - rad(rot);
|
|
end = 0;
|
|
|
|
for (let i = 1; i < sides +1 ; i++) {
|
|
end = stt + rad(rot)
|
|
ctx.beginPath();
|
|
ctx.arc(startx+ Math.cos(rad(90+piv*i))*r, starty+ Math.sin(rad(90+piv*i))*r, r, stt, end ,0);
|
|
//ctx.arc(startx+ 200*i, starty, r, stt, end ,0);
|
|
ctx.stroke();
|
|
stt = end+ -(rad(rot-piv));
|
|
}
|
|
*/
|
|
|
|
/*
|
|
ctx.beginPath();
|
|
ctx.moveTo(300-50, 300);
|
|
ctx.lineTo(300+50, 300);
|
|
ctx.strokeStyle = "red";
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(300, 300-50);
|
|
ctx.lineTo(300, 300+50);
|
|
ctx.strokeStyle = "red";
|
|
ctx.stroke();
|
|
*/
|
|
|
|
// ctx.beginPath();
|
|
// ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1)) * r, starty + Math.sin(rad(90 + 120 * 1)) * r);
|
|
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2)) * r, starty + Math.sin(rad(90 + 120 * 2)) * r);
|
|
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3)) * r, starty + Math.sin(rad(90 + 120 * 3)) * r);
|
|
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1)) * r, starty + Math.sin(rad(90 + 120 * 1)) * r);
|
|
// ctx.strokeStyle = "red";
|
|
// ctx.stroke();
|
|
|
|
// ctx.beginPath();
|
|
// ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1 + 60)) * r, starty + Math.sin(rad(90 + 120 * 1 + 60)) * r);
|
|
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2 + 60)) * r, starty + Math.sin(rad(90 + 120 * 2 + 60)) * r);
|
|
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3 + 60)) * r, starty + Math.sin(rad(90 + 120 * 3 + 60)) * r);
|
|
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1 + 60)) * r, starty + Math.sin(rad(90 + 120 * 1 + 60)) * r);
|
|
// ctx.strokeStyle = "red";
|
|
// ctx.stroke();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |