摘要：所有的繪制工作必須在內部完成。檢查瀏覽器兼容性最新版的，，和都支持，但是及以下都不支持。路徑路徑是通過線段或曲線相連形成的不同形狀的點的集合。這些都是以軸為基準。在指定的位置繪制文本邊框，繪制的最大寬度是可選的。

本文同步于個人博客：https://zhoushuo.me/blog/2018/03/05/html5-canvas/

是HTML5新增的元素，可以用于繪制圖形，制作照片，創建動畫。 標簽只是圖形容器，它沒有自己的行為，必須使用腳本來繪制圖形。

標簽只有兩個屬性—— width和height，當沒有設置寬度和高度的時候， 的默認大小為300px×150px。需要注意的是，如果使用css來定義的大小，在繪制時圖像會伸縮以適應它的框架尺寸：如果CSS的尺寸與初始畫布的比例不一致，它會出現扭曲。

元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成。

創造了一個固定大小的畫布，它公開了一個或多個渲染上下文，其可以用來繪制和處理要展示的內容。

canvas起初是空白的，首先需要找到渲染上下文，然后在它的上面繪制。

var canvas=document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

有一個叫做 getContext()的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數，就是上下文的格式。

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 canvas，但是 IE8及以下都不支持canvas。下面的代碼用于檢測瀏覽器的是否支持canvas

var canvas = document.getElementById("mycanvas"); 

if (canvas.getContext){
    var ctx = canvas.getContext("2d");
    // drawing code here
} else {
    // canvas-unsupported code here
}

在繪制圖形之前，我們還應該先了解一下canvas中的坐標。canvas默認被網格所覆蓋。通常來說網格中的一個單元相當于canvas元素中的一像素。柵格的起點為左上角（坐標為（0,0））。所有元素的位置都相對于原點定位。

好的，接下來我們就開始了解怎么使用Canvas的API繪制基本圖形了 。

var canvas = document.getElementById("mycanvas"); 

if (canvas.getContext){
    var ctx = canvas.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,100,100);
}

上面的兩行代碼繪制一個紅色的矩形：

設置fillStyle屬性可以是css顏色，漸變，或圖案。fillStyle默認設置是#000000（黑色）。

fillRect(x,y,width,height)方法定義了矩形當前的填充方式，x與y指定了在canvas畫布上所繪制的矩形的左上角（相對于原點）的坐標。width和height設置矩形的尺寸。

路徑是通過線段或曲線相連形成的不同形狀的點的集合。一個路徑，甚至一個子路徑，都是閉合的。使用路徑繪制圖形需要一些額外的步驟。
以下是所要用到的方法：

這里需要注意的是，當你調用fill()函數時，所有沒有閉合的形狀都會自動閉合，所以你不需要調用closePath()函數。但是調用stroke()時不會自動閉合。

下面的代碼繪制了一個三角形：

function draw() {
 var canvas = document.getElementById("canvas");
     if (canvas.getContext){
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(75,50);
        ctx.lineTo(100,75);
        ctx.lineTo(100,25);
        ctx.fill();
    }
}

繪制路徑我們可以使用arc()方法。該方法有六個參數：x,y為繪制圓弧所在圓上的圓心坐標。radius為半徑。startAngle以及endAngle參數用弧度定義了開始以及結束的弧度。這些都是以x軸為基準。參數anticlockwise為一個布爾值。為true時，是逆時針方向，否則順時針方向。

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

注意：arc()函數中的角度單位是弧度，不是度數。角度與弧度的js表達式:radians=(Math.PI/180)*degrees。

canvas 提供了兩種方法來渲染文本：

fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的。

strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的。
文本被填充方式：

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

文本邊框備繪制方式：

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.strkeText("Hello World",10,50);

引入圖像到canvas里需要以下兩步基本操作：

獲取一個指向HTMLImageElement的對象或者另一個canvas元素的引用作為源，也可以通過提供一個URL的方式來使用圖片。

使用drawImage()函數將圖片繪制到畫布上。

獲取圖片和繪制圖片，下面只展示最簡單的一種：

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("img");
ctx.drawImage(img,10,10);

drawImage有三個參數：drawImage(image, x, y)。其中image是image或者 canvas對象，x和y是其在目標canvas里的起始坐標。