HTML5 Canvas 詳解

什麼是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製影象。

注：不過，<canvas> 元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用指令碼來完成實際的繪圖任務。

建立 Canvas 元素

在頁面中新增canvas 元素    

<canvas id="myCanvas" width="200" height="100">

Your browser does not support the canvas element.

</canvas>

通過 JavaScript 來繪製

例項--矩形

<script type="text/javascript">

    var c=document.getElementById("myCanvas");  //javascript使用id來尋找canvas元素

    var cxt=c.getContext("2d");  // getContext("2d") 物件是內建的html5物件，擁有多種繪畫路徑、矩形、圓形、字元以及新增影象的方法。

    cxt.fillStyle="#FF0000";  //  fillStyle 設定或返回用於填充繪畫的顏色、漸變或模式

    cxt.fillRect(0,0,150,75);  //  fillRect  繪製“被填充”的矩形  fillRect(x,y,width,height)

</script>

例項--線條

<script type="text/javascript">

    var c=document.getElementById("myCanvas");  //javascript使用id來尋找canvas元素

    var cxt=c.getContext("2d"); // getContext("2d") 物件是內建的html5物件，擁有多種繪畫路徑、矩形、圓形、字元以及新增影象的方法。

    cxt.moveTo(10,10); // moveTo  把路徑移動到畫布中的指定點，不建立線條

    cxt.lineTo(150,50);  //  lineTo 新增一個新點，然後在畫布中建立從該點到最後指定點的線條 ， lineTo(x,y) x、y座標

    cxt.lineTo(10,50);  //  最後指定的點

    var gradient=ctx.createLinearGradient(0,0,170,0);  //  createLinearGradient(x0,y0,x1,y1); x0，y0 為漸變開始點的xy座標 x1，y2為漸變結束點的xy座標

    gradient.addColorStop("0","magenta");

    gradient.addColorStop("0.5","blue");

    gradient.addColorStop("1.0","red");

    ctx.strokeStyle=gradient;  // 用漸變進行填充

    cxt.stroke();  // strokeTo  繪製已定義的路徑

</script>

例項--圓形  通過規定尺寸、顏色、位置來繪製一個圖

<script type="text/javascript">

    var c=document.getElementById("myCanvas"); //javascript使用id來尋找canvas元素

    var cxt=c.getContext("2d"); // getContext("2d") 物件是內建的html5物件，擁有多種繪畫路徑、矩形、圓形、字元以及新增影象的方法。

    cxt.fillStyle="#FF0000"; // fillStyle 設定或返回用於填充繪畫的顏色、漸變或模式

    cxt.beginPath();  // gebinPath() 起始一條路徑，或重置當前路徑。

    cxt.arc(70,18,15,0,Math.PI*2,true);  // 建立弧/曲線（用於建立圓形或部分圓）

    cxt.closePath();  //closePath()方法建立從當前點回到起始點的路徑。

    cxt.fill();  //   填充當前繪畫（路徑）

</script> 

getContext() 屬性和方法 

瀏覽器支援 

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支援 <canvas> 及其屬性和方法。

註釋：Internet Explorer 8 以及更早的版本不支援 <canvas> 元素。

參考文獻：http://www.w3school.com.cn/tags/html_ref_canvas.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext

總結： HTML5 <canvas> 標籤用於繪製影象、但本身沒有繪製能力，需要使用指令碼來完成繪圖。getContext()方法可返回物件，該物件提供了用於在畫布上繪圖的方法和屬性。