<p>把鼠标悬停在下面的矩形中可以看到坐标:</p>
<div id = "coordiv" onmousemove="cnvs_getCoordinates(event)"onmouseout = "cnvs_clearCoordinates()">
</div>
<br/>
<div id = "xycoordinates"></div>
<br/>
<br/>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
<!-- 画线条-->
<p>javascript画的线条</p>
<canvas id = "mycanvas2" width = "200" height = "100" style = "border:1px solid #CCC">your browser does not support the canvas element.</canvas>
<script type="text/javascript">
/**画线条**/
var c = document.getElementById("mycanvas2");
var cxt = c.getContext("2d");
cxt.moveTo(10,10);//将画笔移动到(10,10)
cxt.lineTo(150,50);//用笔画线到(150,50)
cxt.lineTo(10,50);//用笔画线到(10,50)
cxt.stroke();//显示线条
</script>
<!-- 画圆饼 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";//圆的填充色;
cxt.arc(70,18,15,0,Math.PI*2,true);//
cxt.fill();
/**
【画圆,Math.PI 函数的应用。cxt.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数,代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置。0 PI就是起始位置。沿顺时针路线,分别是0.5 PI(正下方),1 PI和1.5 PI(正上方),为画饼图提供了扇形范围的依据。 第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆。第六个参数是一个布尔值,true是顺时针false是逆时针。】
**/
</script>