animate/Catalogue/inverted circle - static.html

75 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="600" 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 r = 100;
var width = Math.cos(30*Math.PI/180)*r*2;
startx = 300;
starty = 300;//-(Math.tan(30*Math.PI/180)*width/2);
var stt =0.5;
var stt1 = (stt-2/3)*Math.PI;
var end1 = (stt)*Math.PI ;
var stt2 = end1;
var end2 = stt2+(2/3)*Math.PI;
var stt3 = end2;
var end3 = stt3+(2/3)*Math.PI;
ctx.beginPath();
ctx.arc(startx+ Math.cos(rad(90+120*1))*r, starty+ Math.sin(rad(90+120*1))*r, r, stt1, end1 ,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(startx+ Math.cos(rad(90+120*2))*r, starty+ Math.sin(rad(90+120*2))*r, r, stt2, end2 ,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(startx + Math.cos(rad(90+120*3))*r, starty+ Math.sin(rad(90+120*3))*r, r, stt3, end3 ,0);
ctx.stroke();
/*
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();
</script>
</body>
</html>