JavaScript繪製圖形Canvas

 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>