本次代碼編寫，只是html5新功能的一次體驗，canvas功能，其中因爲寫熟練了jquery，反而基本的javascript代碼中操作DOM的語法都忘了乾淨，參考了網上的一些寫法以及js手冊，基本完成了模擬畫圖中的畫線條功能。
提幾個問題，
問題一、這裏的作法是當mousemove的時候會調用lineTo的方法，如果不用線條，變爲畫圓，用arc方法，那麼理想狀態下，應該是一個一個緊密排列的圓圈，也可以組成一條線，可是實際是做不到的，鼠標移動太快的時候，就會出現空斷，還沒有具體研究，暫時認爲是反應不過來。。。
好的吧，再提一個問題，
問題二、基本跟canvas相關的指定數值時，都不帶單位，即我們常見的px pt em之類的，只寫數字，那這個地方默認的單位是什麼
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{font-size:70%;font-family:verdana,helvetica,arial,sans-serif;}
.colorTable div{width:30px;height:30px;float:left;border:2px solid;border-style: groove;}
.red{background-color:red}
.green{background-color:green}
.blue{background-color:blue}
.yellow{background-color:yellow}
.black{background-color:black}
</style>
<script type="text/javascript">
//用於指定畫筆顏色
var paintColor = "#000";
//頁面加載時
window.onload = function(){
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
c.onmousedown = function(event){
var event = window.event;
var x = event.clientX - c.offsetLeft;
var y = event.clientY - c.offsetTop;
cxt.moveTo(x,y);
//爲了在改變顏色時，不會影響到之前畫的，所以另外開啓新的路徑，beginPath方法
cxt.beginPath();
document.onmousemove = function(event){
var event = window.event;
var x = event.clientX - c.offsetLeft;
var y = event.clientY - c.offsetTop;
cxt.lineCap="round";
cxt.lineWidth=10;
cxt.lineTo(x,y);
cxt.strokeStyle = paintColor;
cxt.stroke();
};
document.onmouseup = function(event){
document.onmousemove = null ;
document.onmouseup = null ;
};
};
};
//改變畫筆顏色
function changeColor(color){
paintColor = color ;
}
</script>
</head>
<body style="margin:0px;">
<canvas id="myCanvas" style="border:1px solid #c3c3c3;" width=1024 height=768></canvas>
<div class="colorTable">
<div class="red" onclick="changeColor('#F00')"></div>
<div class="green" onclick="changeColor('#0F0')"></div>
<div class="blue" onclick="changeColor('#00F')"></div>
<div class="yellow" onclick="changeColor('#0FF')"></div>
<div class="black" onclick="changeColor('#000')"></div>
</div>
</body>
</html>