canvas

基本介紹

什麼是canvas

1. <canvas>標籤是h5新增的元素，能夠用 js腳本語言（canvas API）繪製圖形。例如，繪製圖形，製做照片，建立動畫，甚至進行實時視頻處理和渲染。<canvas>只是畫布，js是畫筆，能夠在畫布上畫畫。
2. canvas標籤只有兩個屬性：width（默認300px），height（默認150px）

<canvas id="canvas" width="300" height="150"></canvas>

var canvas = document.getElementById('canvas');
// canvas.width = 30;
// canvas.height = 300;

canvas解決了什麼問題

在互聯網出現的早期，Web 只不過是靜態文本和連接的集合。1993 年，有人提出了 img 標籤，它能夠用來嵌入圖像。

因爲互聯網的發展愈來愈迅猛，Web 應用已經從 Web 文檔發展到 Web 應用程序。可是圖像一直是靜態的，人們愈來愈但願在其網站和應用程序中使用動態媒體（如音頻、視頻和交互式動畫等），因而 Flash 就出現了。

可是隨着 Web 應用的發展，出現了 HTML5，在 HTML5 中，瀏覽器中的媒體元素大受青睞。包括出現新的 Audio 和 Video 標籤，能夠直接將音頻和視頻資源放在 Web 上，而不須要其餘第三方。

其次就是爲了解決只能在 Web 頁面中顯示靜態圖片的問題，出現了 Canvas 標籤。它是一個繪圖表面，包含一組豐富的 JavaScript API，這些 API 使你可以動態建立和操做圖像及動畫。img 對靜態圖形內容起到了哪些做用，Canvas 就可能對可編寫腳本的動態內容起到哪些做用。

Canvas 是爲了解決 Web 頁面中只能顯示靜態圖片這個問題而提出的，一個可使用 JavaScript 等腳本語言向其中繪製圖像的 HTML 標籤。

畫布上下文

canvas起初是空白的，其內容是使用javascript來呈現的。咱們須要將canvas標籤放在HTML文檔中的某個位置，使用JavaScript訪問canvas標籤，建立畫布上下文，而後利用HTML5 Canvas API繪製可視化。canvas元素是嵌入在HTML頁面中的實際DOM節點， <canvas> 元素有一個叫作 getContext() 的方法，這個方法是用來得到畫布上下文，畫布上下文是一個具備屬性和方法的對象，可用於在canvas元素內呈現圖形，getContext()只有一個參數（ 2d or webgl (3d)），表示上下文的格式。

<canvas id="canvas" width="300" height="150"></canvas>

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

圖片

畫圖

要使用HTML5 Canvas繪製圖像，咱們可使用畫布上下文的drawImage（）方法，該方法須要一個圖像對象和目標點。 目標點定義圖像相對於畫布左，上角的距離。

因爲drawImage（）方法須要一個圖像對象，咱們必須首先建立一個圖像並在實例化drawImage（）以前等待它加載完成。 咱們能夠經過使用圖像對象的onload屬性來實現這一點。

<canvas id="myCanvas" width="578" height="400"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
  ctx.drawImage(imageObj, 69, 50);
};

圖片大小

要使用HTML5 Canvas設置圖片的大小，咱們能夠向drawImage（）方法，添加2個額外的參數，分別表示圖片的width和height。

<canvas id="myCanvas" width="578" height="200"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
  var x = 188;
  var y = 30;
  var width = 200;
  var height = 137;
  ctx.drawImage(imageObj, x, y, width, height);
};

圖片裁剪

要使用HTML5 Canvas裁剪圖像，咱們能夠向drawImage（）方法，添加8個附加參數，sourceX，sourceY，sourceWidth，sourceHeight，destX，destY，destWidth和destHeight，參照下邊的圖解。

<canvas id="myCanvas" width="578" height="200"></canvas>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
  var sourceX = 150;
  var sourceY = 0;
  var sourceWidth = 150;
  var sourceHeight = 150;
  var destWidth = sourceWidth;
  var destHeight = sourceHeight;
  var destX = canvas.width / 2 - destWidth / 2;
  var destY = canvas.height / 2 - destHeight / 2;
  ctx.drawImage(imageObj, sourceX, sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight);
};