canvas的api的學習（一）

簡介

Canvas是 HTML5 新增的，一個能夠使用腳本(一般爲JavaScript)在其中繪製圖像的 HTML 元素。它能夠用來製做

照片集或者製做簡單(也不是那麼簡單)的動畫，甚至能夠進行實時視頻處理和渲染。

Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript代碼能夠訪問該區域，相似於其餘通用

的二維API，經過一套完整的繪圖函數來動態生成圖形。

​Mozilla 程序從 Gecko 1.8 (Firefox 1.5)開始支持Canvas, Internet Explorer 從IE9開始支持。Chrome和Opera 9+ 也支持。

canvas的基本使用

1.canvas標籤使用

<canvas id="target" width="300px" height="150px">
  不支持canvas標籤會顯示該內容
</canvas>
複製代碼

2.canvas方法檢查

var canvas = document.getElement('target')
if (canvas.getContext) {
  var ctx = canvas.getContent('2d')
} else {
  console.log('該瀏覽器版本太低，請更換')
}
複製代碼

3.canvas繪製圖形

canvas的api

• moveTo( x, y ) 將筆觸移動到指定的座標(x,y)

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
  </script>
複製代碼

• lineTo( x, y ) 繪製一條從當前位置到指定的座標(x,y)的直線

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(300,150); // lineTo
    ctx.stroke();
  </script>
複製代碼

fill() 填充當前繪圖（路徑）

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.fillStyle="red";
    ctx.fill();
  </script>
複製代碼

stroke() 繪製已定義的路徑

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.strokeStyle="green";
    ctx.stroke();
  </script>
複製代碼

beginPath() 起始（重置）當前路徑

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="red"; // 紅色路徑
    ctx.moveTo(0,75);
    ctx.lineTo(250,75);
    ctx.stroke(); // 進行繪製

    ctx.beginPath();
    ctx.strokeStyle="blue"; // 藍色路徑
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke(); // 進行繪製
  </script>
複製代碼

closePath() 結束當前路徑

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(20,20);
  ctx.lineTo(20,100);
  ctx.lineTo(70,100);
  ctx.closePath();
  ctx.stroke();

</script>
複製代碼

clip() 從原始畫布剪切任意形狀和尺寸的區域

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    // 剪切矩形區域
    ctx.rect(50, 20, 200, 120);
    ctx.stroke();
    ctx.clip();
    // 在 clip() 以後繪製綠色矩形
    ctx.fillStyle="black";
    ctx.fillRect(0, 0, 150, 100);
  </script>

複製代碼

rect( x, y, width, height ) 繪製矩形

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>

  <script>
    var c = document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.stroke();
  </script>
複製代碼

fillRect( x, y, width, height ) 繪製被填充的矩形

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標籤。
</canvas>
<script>
  var c = document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.fillRect(100, 30, 150, 100);
</script>
複製代碼

strokeRect( x, y, width, height ) 繪製矩形（無填充）

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.strokeRect(20, 20, 150, 100);
  </script>
複製代碼

clearRect( x, y, width, height ) 清除指定的矩形內的像素

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標籤。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,300,150);
    ctx.clearRect(20,20,100,50);
複製代碼

canvas學習推薦資料

• HTML5 Canvas核心技術