1. 繪制圖像

API是drawImage(), 常用語法是drawImage（image,x,y,width,height）

例子1：不同形式顯示一張圖片

<canvas id="myCanvas" height=1000 width=1000>您的瀏覽器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var c=document.getElementById("myCanvas");  // 獲取網頁中的canvas對象
  var ctx=c.getContext("2d");  //獲取canvas對象的上下文
  var imageObj = new Image();  // 創建圖像對象
  imageObj.src = "XXX.jpg";  // 獲得當前目錄下的圖像

  imageObj.onload = function(){   
      ctx.drawImage(imageObj, 0, 0); // 完整顯示
      ctx.drawImage(imageObj, 250, 0, 120, 160);  // 改變圖像大小顯示
      ctx.drawImage(imageObj, 0, 100, 240, 160, 400, 0, 240, 160);  //選擇圖像一部分顯示
   }; 
}
window.addEventListener("load", draw, true);
</script>

例子2：組合圖像顯示

<canvas id="myCanvas" height=500 width=500>您的瀏覽器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var c=document.getElementById("myCanvas") // 獲取網頁中的canvas對象	
  var ctx=c.getContext("2d")                // 獲取canvas對象的上下文
  ctx.fillStyle = "yellow"                  // 填充圖形內部的顏色為黃色
  ctx.fillRect(50,50, 100, 100)             // 矩形的寬度和高度為100，內部填充黃色

  ctx.fillStyle = "red"
  ctx.globalCompositeOperation = "soure-over"  //覆蓋填充

  var centerX = 150
  var centerY = 150
  var radius = 50
  var startAngle = 0
  var endiAngle = 2 * Math.PI

  ctx.beginPath()// 開始繪圖路徑
  ctx.arc(centerX, centerY, radius, startAngle, endiAngle, false) //繪制圓
  ctx.fill()   
} 

window.addEventListener("load", draw, true)
</script>

PS：目前發現用sublime的view in browser看HTML程序編寫的效果有個問題，如果代碼寫錯就會是全白，但是并不會顯示是哪一行代碼出現問題

調試方法：

（1）運用document.write()或alert（）輸出變量的值

（2）用chrome中工具的開發者工具，或者直接按F12

2.  輸出文字

可以使用strokeText（）方法在畫布的指定位置輸出文字，語法如下：

strokeText（string text，float x， float y）這樣輸出的文字是中空的，可以通過fillText輸出文字，內部是填充了顏色的。

<canvas id="myCanvas" height=500 width=500>您的瀏覽器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var c=document.getElementById("myCanvas");  // 獲取網頁中的canvas對象
  var ctx=c.getContext("2d");  //獲取canvas對象的上下文

  var Colordiagonal = ctx.createLinearGradient(100,100, 300,100);
  Colordiagonal.addColorStop(0, "yellow");
  Colordiagonal.addColorStop(0.5, "green");
  Colordiagonal.addColorStop(1, "red"); 
  ctx.fillStyle = Colordiagonal;
  ctx.font = "30pt 隸書";
  ctx.fillText("浙江理工大學", 50, 50);  //漸變填充文字
  ctx.strokeText("天津大學", 100, 100); //位置
}

window.addEventListener("load", draw, true);
</script>

PS：分號可以寫，也可以不寫，但一定要寫對，是英文輸入法的;

3. 圖像操作

（1）保存和恢復繪圖狀態

可以調用Context.save()方法保存當前的繪圖狀態，Canvas是以堆(stack)的方式保存繪圖狀態的，調用Context.restoe()可以從堆中彈出之前保存的繪圖狀態。

<canvas id="myCanvas" height=500 width=500> </canvas>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'red'
ctx.fillRect(0,0,150,150);
ctx.save(); 

ctx.fillStyle = 'green' 
ctx.fillRect(45,45,60,60); 
ctx.restore(); 

ctx.fillStyle = 'black'
ctx.fillRect(60,60,30,30); 
}
window.addEventListener("load", draw, true);
</script>

（2）圖形的變換

平移：translate（x,y）  // x是x坐標軸縮放比例，y是y坐標軸縮放比例

縮放：scale（x,y）

旋轉：rotate（angle）

變形：setTransform（m11, m12, m21, m22, dx, dy）假設（x,y）經過變形為(X, Y)，

變形的公式為:X=m11*x + m21*y + dx

                       Y = m12*x  + m22*y +dy

<canvas id="myCanvas" height=550 width=550>您的瀏覽器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var canvas=document.getElementById("myCanvas");  // 獲取網頁中的canvas對象
  var context = canvas.getContext("2d"); //獲取canvas對象的上下文
  context.save(); //保存了當前context的狀態

  context.fillStyle = "red";
  context.fillRect(0, 0, 400, 300);

  context.fillStyle = "blue";
  context.fillRect(0, 0, 100, 100);      //正方形

  context.fillStyle = "green";
  //平移 縮放 旋轉  1 2 3        
  context.translate(100, 100);           //坐標原點平移(100, 100)
  context.scale(0.5, 0.5);               //x,y軸是原來一半
  context.rotate(Math.PI / 4);           //旋轉45度
  context.fillRect(0, 0, 100, 100);      //平移 縮放 旋轉后的正方形

  context.restore(); // 恢復之前保存的繪圖狀態, 如果沒有恢復，就接下來畫的圖也會進行移動等操作
  //
  context.fillStyle = "black";
  context.beginPath();  //  開始繪圖路徑
  // context.arc(200, 50, 50, 0,  2 * Math.PI, false); 
  context.arc(50, 50, 50, 0,  2 * Math.PI, false); 
  context.stroke();
  context.fill();

}
window.addEventListener("load", draw, true);
</script>

4.繪制圖像動畫

動畫是通過一幅幅靜止的，內容不同的畫面（幀）快速播放，人類視覺殘留的視覺大約為1/24秒。所以在計算機上喲啊實現動畫效果，要能實現定期繪圖 和 清除先前繪制的圖像。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas實現游戲人物的跑步動畫</title>
  </head>
  <script type="text/javascript"> 
    var imageObj = new Image(); // 創建圖像對象
    var x =300; 
    var n =0;                   // 計數器

    function init()
    {
      imageObj.src = 'XXX.jpg';
      imageObj.onload = function(){
         setInterval(draw,100);// 定時器，每0.1秒執行一次draw()函數
      };
    }

    function draw()
    {
        var canvas=document.getElementById("myCanvas");  // 獲取網頁中的canvas對象
        var ctx = canvas.getContext("2d"); //獲取canvas對象的上下文
         
           ctx.clearRect(0,0,300,300); // 清除canvas畫布 
 
           //從原圖(60*n)位置開始截取中間一塊寬60*高80的區域，顯示在屏幕(x,0)處           
           ctx.drawImage(imageObj, 60*n, 0, 60, 80, x, 0, 60, 80);
           if(n>=8){
              n=0;
           }else{
              n++;
           }
           if(x>=0){
              x=x-30;  //前移30像素
           }else{
              x=300;   //回到右側
           }       
    }
    window.addEventListener("load", init, true);
  </script>

  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </body>
</html>