75 lines
1.6 KiB
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>
|