[JavaScript ¼Ò½º]
<html>
<head>
<title> Today Mission </title>
<script language="javascript">
var x1=0, x2=920, y1=0, y2=520;
function fun1()
{
var c=document.getElementById("c1").getContext("2d");
c.beginPath();
c.strokeStyle="#4374D9";
c.moveTo(x1,y2/2); c.lineTo(x2,y2/2);
c.stroke();
}
var r=0, cc=0;
var color=new Array("#4374D9","#47C83E","#8041D9", "#FF007F", "#BCE55C");
function fun2()
{
var c=document.getElementById("c1").getContext("2d");
c.beginPath();
c.strokeStyle=color[1];
var x=0, y;
y = parseInt(Math.sin(x)*100);
c.moveTo(x,-1*y+y2/2); c.lineTo(x,-1*y+y2/2+10);
for(x=1; x<=900; x++){
y = parseInt(Math.sin(x/100)*100);
c.moveTo(x,-1*y+y2/2); c.lineTo(x,-1*y+y2/2+10);
}
c.stroke();
}
function fun3()
{
var c=document.getElementById("c1").getContext("2d");
c.beginPath();
c.strokeStyle=color[2];
var x=0, y;
y = parseInt(Math.cos(x)*100);
c.moveTo(x,-1*y+y2/2);c.lineTo(x,-1*y+y2/2+10);
for(x=1; x<=900; x++){
y = parseInt(Math.cos(x/100)*100);
c.moveTo(x,-1*y+y2/2);c.lineTo(x,-1*y+y2/2+10);
}
c.stroke();
}
function fun4()
{
var c=document.getElementById("c1").getContext("2d");
c.beginPath();
c.strokeStyle=color[3];
var x=0, y;
y = parseInt(Math.tan(x)*100);
c.moveTo(x,-1*y+y2/2); c.lineTo(x,-1*y+y2/2+10);
for(x=1; x<=900; x++){
y = parseInt(Math.tan(x/100)*100);
c.moveTo(x,-1*y+y2/2); c.lineTo(x,-1*y+y2/2+10);
}
c.stroke();
}
</script>
</head>
<body>
<h1> Today Mission </h1>
<input type="button" value="go~" onClick="fun1()">
<input type="button" value="sin~" onClick="fun2()">
<input type="button" value="cos~" onClick="fun3()">
<input type="button" value="tan~" onClick="fun4()">
<br>
<canvas id="c1" width="900" height="500" style="border:1px solid#000000">
</canvas>
</body>
</html>
|