Javascript的canvas類是HTML5出現之后的一個新特性，它可以通過編寫Javascript代碼來在瀏覽器中繪制圖形

例如，在html中可以通過以下代碼創建一個canvas元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

創建canvas元素之后，在Javascript代碼中可以使用該canvas元素的 getContext() 方法來獲得繪圖環境。例如，如下代碼可以獲得2D繪圖環境：

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

接下來，我們可以使用getContext()返回的繪圖環境來繪制各種圖形。例如，以下代碼可以在畫布上繪制一個紅色的矩形：

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

上述代碼將矩形從坐標(10, 10)到(60, 60)范圍內填充成紅色。事實上，Canvas類還可以繪制多種不同的圖形，包括圓形、直線、以及復雜的路徑等等。例如，以下代碼可以繪制一個藍色的圓形：

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); 
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();

上述代碼將在坐標(75, 75)的位置處創建一個半徑為50的圓形。注意，由于繪圖環境是有狀態的，因此在繪制新圖形時需要使用beginPath()方法將環境狀態歸零。另外，closePath()方法可以在繪制路徑時將路徑關閉。

除了繪制圖形之外， Canvas類還支持圖像渲染、圖像裁剪等功能。例如，以下代碼可以將canvas元素的一部分截取下來，形成新的圖像：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImage");
ctx.drawImage(img, 10, 10, 150, 180, 50, 50, 75, 90);

上述代碼將從圖片中選取一個范圍(10, 10, 150, 180) ，將其放置在畫布上的位置(50, 50)處，并調整其大小為(75, 90)。

綜上所述，Javascript的Canvas類提供了一種強大的瀏覽器圖形繪制解決方案，不僅可以用于圖形的繪制，還可以用于圖像渲染、圖像裁剪等功能。學會使用Canvas類對于前端開發人員來說是一個很不錯的技能點。