1.鼠標繪圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oC.onmousedown = function(ev){
var ev = ev || window.event;
oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
document.onmousemove = function(ev){
var ev = ev || window.event;
oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
oGC.stroke();
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">
<span>不支持canvas瀏覽器</span>
</canvas> <!--默認：寬300 高150-->
</body>
</html>2.方塊移動
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
oGC.fillRect(0,0,100,100);
setInterval(function(){
num++;
oGC.clearRect(0,0,oC.width,oC.height);
oGC.fillRect(num,num,100,100);
},30);
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">
<span>不支持canvas瀏覽器</span>
</canvas> <!--默認：寬300 高150-->
</body>
</html>3.Canvas開發注意事項 canvas畫布寬高定義
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
body{ background:black;}
#c1{ background:white; width:600px; height:300px;}
span{ color:white;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
oGC.fillRect(0,0,100,100);
};
</script>
</head>
<body>
<canvas id="c1">
<span>不支持canvas瀏覽器</span>
</canvas> <!--默認：寬300 高150-->
</body>
</html>此定義方式爲按（默認大小）比例矢量放大縮小，如果要定義寬高應如下定義
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
body{ background:black;}
#c1{ background:white; }
span{ color:white;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
oGC.fillRect(0,0,100,100);
};
</script>
</head>
<body>
<canvas id="c1" width:600px; height:300px;>
<span>不支持canvas瀏覽器</span>
</canvas> <!--默認：寬300 高150-->
</body>
</html>