Canvas畫布詳解

Canvas畫布是HTML5的一種新元素，它可以在網頁上動態繪製圖像。在初學者掌握Web開發基礎知識後，學習Canvas畫布成為了曲線救國的最佳途徑，因為它可以讓你不僅僅掌握Web開發基礎，而且還可以用它來創造一些真正的互聯網應用。

一、Canvas畫布官網

在使用Canvas畫布之前，我們需要了解官網上提供的API接口及文檔，這有助於我們更好地了解和掌握Canvas的使用方法。

// Canvas畫布創建
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);

// Canvas繪製圖片
function drawImage(){
  var img = new Image();
  img.addEventListener("load", function(){
    context.drawImage(img, 0, 0);
  }, false);
  img.src = "http://example.com/image.png";
}

Canvas的API很容易理解，不過對於新手來說，最好的方法是看看官網上的文檔，以便儘快熟悉它的功能和結構。

二、Canvas清空畫布

Canvas可用於繪製各種圖形，但是在每次完成繪圖後我們需要先清空畫布，否則會出現重疊等其他問題。

// 清空整個畫布
context.clearRect(0, 0, canvas.width, canvas.height);

// 清空部分畫布
context.clearRect(x, y, width, height);

使用clearRect()方法我們可以清空整個畫布或者指定繪圖區域，以便我們更好地用Canvas繪製我們所需要的圖形。

三、Canvas畫布截圖

Canvas畫布截圖是將整個Canvas畫布的內容保存為一個圖片文件，方便我們在需要時保存和分享繪製的圖片。

// Canvas畫布轉換為圖片
function canvasToImage(){
  var image = canvas.toDataURL("image/png");
  window.location.href = image;
}

使用Canvas的toDataURL()方法將canvas畫布轉換成單一文件格式，一般常用的是PNG格式進行保存，如果需要轉換成JPEG格式，需要將參數改為”image/jpeg”。

四、Canvas畫布默認為什麼顏色 & Canvas畫布顏色默認是什麼

每次創建Canvas畫布時，它的默認背景顏色都是黑色，這也是很多繪圖軟件默認設置的背景顏色。

// 設置畫布背景顏色
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);

我們可以使用fillStyle屬性將畫布的背景顏色設置為我們想要的顏色。

五、Canvas畫布案例

使用Canvas畫布可實現很多有趣的效果，比如下面的案例就是一個可以自由繪製的畫圖板：

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

var painting = document.querySelector(".painting");
var draw = false;

if(canvas.getContext){
  context.lineWidth = 10;
  context.lineJoin = "round";
  context.lineCap = "round";
  context.strokeStyle = "#333";

  canvas.addEventListener("mousedown", function(e){
    draw = true;
    context.beginPath();
    context.moveTo(e.pageX - painting.offsetLeft, e.pageY - painting.offsetTop);
  });

  canvas.addEventListener("mousemove", function(e){
    if(draw){
      context.lineTo(e.pageX - painting.offsetLeft, e.pageY - painting.offsetTop);
      context.stroke();
    }
  });

  canvas.addEventListener("mouseup", function(e){
    draw = false;
  });
}

這個案例可以使用鼠標在畫布上自由繪製，可以從中了解到Canvas畫布的使用。

六、如何設置Canvas畫布的背景

我們可以使用CSS樣式來設置Canvas畫布的背景，當然，你也可以在JavaScript中直接設置。

// 使用CSS樣式設置Canvas背景
canvas {
  background: #FFFFFF;
}

使用CSS設置畫布背景的方式與設置普通背景的方式無異，只需要給畫布設置相應的背景顏色即可。

七、Canvas畫布的使用

我們可以使用Canvas畫布來實現很多效果，比如繪製圖形、文本、圖像等。下面是一個簡單的例子：

// 畫布獲取
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

// 設置畫布背景顏色
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);

// 繪製三角形
context.beginPath();
context.moveTo(100, 50);
context.lineTo(150, 150);
context.lineTo(50, 150);
context.closePath();
context.fillStyle = "#CCCCCC";
context.fill();

Canvas畫布的使用非常豐富多彩，只有你想不到，沒有它繪製不出來的圖形。

八、Canvas畫布寬與畫板寬

Canvas畫布與實際顯示在頁面上的畫板存在一定的區別，比如實際畫板的寬度可以隨意調整，而畫布的大小卻需要固定。通過CSS樣式的尺寸設置，在頁面中可以隨意調整畫板的大小。

// CSS樣式設置畫板寬與高
.painting {
  width: 600px;
  height: 400px;
}

通過CSS樣式設置畫板的寬和高，從而設置Canvas畫布的大小，以便於在實際頁面中進行動態調整。