<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>