HTML5 Canvas 2D API 規范 1.0 中文版：
http://wenku.baidu.com/view/d841013d0912a2161479292d.html
開始先學習三個方法：fillRect() strokeRect() clearRect()，它們接收四個參數，分別是：X軸坐標，Y軸坐標，寬，高 。
HTML5 Canvas 2D API 規范 1.0 中文版：
http://wenku.baidu.com/view/d841013d0912a2161479292d.html
<canvas id="test"></canvas>
開始先學習三個方法：fillRect() strokeRect() clearRect()，它們接收四個參數，分別是：X軸坐標，Y軸坐標，寬，高 。
<script type="text/javascript">
var canvas = document.getElementById("test");
if(canvas.getContext){
var context = canvas.getContext("2d");//繪制一個2D繪圖環境
context.fillStyle = "#ccc"; //顏色是#ccc的圖形
context.fillRect(0,0,50,50); //fillRect繪制的是一個寬高各50的填充長方形
context.strokeRect(0,0,50,50); //strokeRect繪制的是邊框長方形
context.clearRect(30,30,10,10); //clearRect()是清除畫布區域的一部分
}
</script>
下一個例子：
<script type="text/javascript">
var canvas = document.getElementById("test");
if(canvas.getContext){
var context = canvas.getContext("2d");
//新路徑建立
context.beginPath();
//這個設置與CSS中設置字體一樣，大小、字體、格式等
context.font = "12px 微軟雅黑";
//設置文字如何對齊，與CSS中text-align屬性一樣
context.textAlign = "center";
//設置文字的基線，這個與CSS中的background:top;一樣
context.textBaseline = "top";
//我們要繪制的字符串是12，坐標是X100 Y80的位置
context.fillText("時鐘表",100,80);
//繪制圓
context.arc(100,100,99,0,2*Math.PI,false);
//arc有六個參數，xy是繪制中心點在100 100的弧，然后半徑為99。
//角度是在0和2*Math.PI之間，逆時針方向。
//繪制外圓
context.moveTo(194,100);
//意思是把光標移動到194 100的這個坐標上，但是不繪制線條。
context.arc(100,100,94,0,2*Math.PI,false);
//繪制時針
context.moveTo(100,100);
context.lineTo(100,15);
//從最后一點移動到100 15這個坐標上，然后繪制一條直線
//路徑描邊
context.stroke();
}
</script>
下一個例子：
<script type="text/javascript">
var canvas = document.getElementById("test");
if(canvas.getContext){
var context = canvas.getContext("2d");
//旋轉中
context.translate(100,100);
//將原點坐標移動到100 100坐標上。
//旋轉弧度
context.rotate(1);
//以1的弧度開始旋轉
//保存狀態
context.fillStyle = "#ccc";
context.translate(100,100);
context.save();
//調用save()方法后，將把這一狀態保存起來。
//退回狀態
context.restore();
}
</script>
浙公網安備 33010602011771號