1、用canvas畫一個矩形，將鼠標懸浮在矩形框上，鼠標移動可以顯示座標:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
body
{
font-size: 70%;
font-family: sans-serif;
}
</style>
<script type="text/javascript">
function m_getRectXY(e)
{
x = e.clientX;
y = e.clientY;
document.getElementById("xycoor").innerHTML="當前座標爲:("+ x +","+ y +")";
}
function m_clearall()
{
document.getElementById("xycoor").innerHTML="";
}
</script>
</head>
<body style="margin: 0px">
<p>把鼠標放在下面的矩形上可以看到座標：</p>
<div id="coordiv" style="float:left;width: 199px;height: 99px;border: 1px solid #c3c3c3"
onmousemove="m_getRectXY(event)"
onmouseout="m_clearall()"
></div>
<br/>
<div id="xycoor"></div>
</body>
</html>效果圖如下：
2、畫一個矩形，再在矩形中畫一個圓：
<!DOCTYPE html>
<html>
<body>
<canvas id="mCanvas"
width="200"
height="100"
style="border: 1px solid #c3c3c3"/>
<script type="text/javascript">
var c = document.getElementById("mCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.arc(90,40,15,15,Math.PI*2.5,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>效果圖如下：
3、使用指定的顏色繪製漸變的背景：
<!DOCTYPE html>
<html>
<body>
<canvas id="mCanvas"
width="200"
height="100"
style="border: 1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("mCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,200,100);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,100);
</script>
</body>
</html>效果圖如下：
