簡介 jCanvas：當 jQuery趕上HTML5 Canvas

時間  2019-12-05
標籤 簡介 jcanvas jquery 趕上 html5 html canvas 欄目 JQuery 简体版
原文   原文鏈接

HTML5 能夠直接在你的網頁中使用 <canvas> 元素及其相關的 JavaScript API繪製的圖形。html

在這篇文章中，我將向你介紹 jCanvas，一個基於 jQuery的免費且開源的 HTML5的Canvas API。前端

若是你使用 jQuery 進行開發，jCanvas可以使用 jQuery更簡單，更快速的完成一些很是炫酷的 canvas畫布及交互效果。html5

什麼是 jCanvas ？

jCanvas 官網是這樣解釋的：jquery

「jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more.git

The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 canvas. 」github

jCanvas 能讓你作的一切事情，你均可以用原生的Canvas API來實現，甚至能夠作更多的事情。若是你願意的話，你也能夠將原生的Canvas API方法和 jCanvas一塊兒使用。draw()方法就能夠這樣使用。此外，你還能夠很是輕鬆的用本身的方法結合 extend()函數來擴展jCanvas的功能。canvas

添加jCanvas 到你的項目中

將jCanavs添加在你的項目中，從官方網站或GitHub的頁面上下載腳本，而後將腳本文件放在你的項目文件夾中。正如前面說的，jCanvas須要依賴 jQuery才能正常工做，因此還要確保引入了 jQuery文件。瀏覽器

項目的腳本文件將是這個樣子：app

<script src="js/jquery.min.js></script>
<script src="js/jcanvas.min.js></script>
<script src="js/script.js></script>

最後，引入你本身的JavaScript 代碼文件。如今，讓咱們開始jCanvas之旅吧。編輯器

設置 HTML文檔

咱們經過爲 HTMl5文檔添加一個<canvas>標籤，來開始咱們的示例。

<canvas id="myCanvas" width="600" height="300">
 <p>This is fallback content 
      for users of assistive technologies 
      or of browsers that don't have 
      full support for the Canvas API.</p>
</canvas>

如下是關於上面的代碼片斷的幾點說明。

  1. 默認狀況下，<canvas>的尺寸300px x 150px，你能夠在width 和 height 屬性裏修改默認的大小。

  2. id屬性不是必須添加的，可是確是 JavaScript訪問該元素的最簡單的方法。

  3. 在<canvas>元素中的內容只是位圖，這使得它沒法被使用輔助技術的用戶訪問。另外，對不支持 Canvas API的瀏覽器，將不可以訪問其內容或者任何方式的交互。所以，該技術旨在讓<canvas>更容易被支持。

若是你想使用原生的Canvas API，你的 JavaScript 代碼將會這樣的：

var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');

上述代碼中的context變量存儲了Canvas對象的一個2D上下文屬性。正是這種特性，使得你能夠訪問 HTML5的 Canvas API提供的全部其餘屬性和方法。

若是你想了解的更多，你能夠戳這裏HTML5 Canvas 簡介。

jCanvas的方法和屬性已經包含了2D上下文的引用，所以你能夠直接的跳到繪製圖片。

用jCanvas繪製一些圖形

大多數的 jCanvas方法，接受鍵值對的形式，所以你能夠根據你的須要，或你喜歡的順序去使用它們。

讓咱們從繪製一個矩形開始吧。

矩形

下面是你怎樣用 jCanvas對象的 drawRect() 方法繪製出一個矩形的方法。

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

// rectangle shape 
$myCanvas.drawRect({
      fillStyle: 'steelblue',
      strokeStyle: 'blue',
      strokeWidth: 4,
      x: 150, y: 100,
      fromCenter: false,
      width: 200,
     height: 100
});

上面的代碼片斷表示，存儲 Canvas對象到一個名爲$myCanvas的變量中。裏面的drawRect()方法的屬性都是比較簡單的，可是咱們在這裏簡單的闡述一下：

  1. fillStyle 設置矩形的背景色;

  2. strokeStyle 設置它的邊框顏色;

  3. strokeWidth 設置矩形的邊框寬度;

  4. x 和 y設置對應矩形的座標的水平和垂直的畫布內測的位置。頂點的0值的分別爲 x和y，也就是說，（0，0），對應於畫布的左上角。x座標向右增大，y座標朝向畫布的底部增長。默認狀況下，jCanvas會以矩形的中心點做爲x和y座標的值;

  5. 要想改變這一點，以便x和y對應矩形的左上角，能夠將fromCenter屬性的值設置爲 false;

  6. 最後，經過寬度和高度屬性設置矩形的尺寸。

juxing

下面是矩形的示例代碼：

HTML：

<h2>jCanvas example: Rectangle</h2>

<canvas id="myCanvas" width="600" height="300">
       <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

// rectangle shape 
$myCanvas.drawRect({
  fillStyle: 'steelblue',
  strokeStyle: 'blue',
  strokeWidth: 4,
  x: 190,
  y: 50,
  fromCenter: false,
  width: 200,
  height: 100
});

Result:

jCanvas example: Rectangle

rectangle

圓弧和圓

弧是一個圓的邊緣部分。對於jCanvas來講，畫一個圓弧僅僅是在 drawArc() 方法裏設置幾個所需的屬性：

$myCanvas.drawArc({
  strokeStyle: 'steelblue',
  strokeStyle: 'blue',
  strokeWidth: 4,
  x: 300, y: 100,
  radius: 50,
  // start and end angles in degrees
  start: 0, end: 200
});

繪製弧形，須要設置半徑屬性的值，以及開始的角度和結束的角度。若是你但願弧形是逆時針方向的話，須要添加一個ccw屬性，並將其屬性值設置爲true。

下面是上述代碼塊演示：

HTML:

<h2>jCanvas example: Arc</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS：

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS：

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.drawArc({
  strokeStyle: 'steelblue',
  strokeStyle: 'blue',
  strokeWidth: 4,
  x: 300, y: 100,
  radius: 50,
  // start and end angles in degrees
  start: 0, end: 200
});

Result:

jCanvas example: Arc

Arc

繪製一個圓形：

舉例來講，下面是如何只使用圓弧形狀來繪製出一個簡單的笑臉圖形：

$myCanvas.drawArc({
  // draw the face
  fillStyle: 'yellow',
  strokeStyle: '#333',
  strokeWidth: 4,
  x: 300, y: 100,
  radius: 80
}).drawArc({
  // draw the left eye
  fillStyle: '#333',
  strokeStyle: '#333',
  x: 250, y: 70,
  radius: 5
}).drawArc({
  // draw the right eye
  fillStyle: '#333',
  strokeStyle: '#333',
  x: 350, y: 70,
  radius: 5
}).drawArc({
  // draw the nose
  strokeStyle: '#333',
  strokeWidth: 4,
  ccw: true,
  x: 300, y: 100,
  radius: 30,
  start: 0,
  end: 200
}).drawArc({
  // draw the smile
  strokeStyle: '#333',
  strokeWidth: 4,
  x: 300, y: 135,
  radius: 30,
  start: 90,
  end: 280
});

請記住，jCanvas是基於jQuery的，所以，你能夠像jQuery的鏈式操做同樣，在jCanvas中也可使用鏈式操做。

下面是以上代碼在瀏覽器中的效果：

HTML:

<h2>jCanvas example: Smiling Face</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.drawArc({
  // draw the face
  fillStyle: 'yellow',
  strokeStyle: '#333',
  strokeWidth: 4,
  x: 300, y: 100,
  radius: 80
}).drawArc({
  // draw the left eye
  fillStyle: '#333',
  strokeStyle: '#333',
  x: 250, y: 70,
  radius: 5
}).drawArc({
  // draw the right eye
  fillStyle: '#333',
  strokeStyle: '#333',
  x: 350, y: 70,
  radius: 5
}).drawArc({
  // draw the nose
  strokeStyle: '#333',
  strokeWidth: 4,
  ccw: true,
  x: 300, y: 100,
  radius: 30,
  start: 0,
  end: 200
}).drawArc({
  // draw the smile
  strokeStyle: '#333',
  strokeWidth: 4,
  x: 300, y: 135,
  radius: 30,
  start: 90,
  end: 280
});

Result:

jCanvas example: Smiling Face

face

繪製線條和路徑

你能夠用drawLine()方法快速的繪製直線，或者定義一系列的線條的鏈接點。

$myCanvas.drawLine({
  strokeStyle: 'steelblue',
  strokeWidth: 10,
  rounded: true,
  closed: true,
  x1: 100, y1: 28,
  x2: 50, y2: 200,
  x3: 300, y3: 200,
  x4: 200, y4: 109
});

上面代碼設置了 rounded和closed屬性的值爲true，從而所繪製的線和角都是閉合的。

HTML:

<h2>jCanvas example: Connected lines</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.drawLine({
  strokeStyle: 'steelblue',
  strokeWidth: 10,
  rounded: true,
  closed: true,
  x1: 100,
  y1: 28,
  x2: 50,
  y2: 200,
  x3: 300,
  y3: 200,
  x4: 200,
  y4: 109
});

Result:

jCanvas example: Connected lines

sanjiao

還可使用drawPath()方法繪製路徑。

該drawPath()方法設置 x 和 y值，你還須要制定你要繪製的路徑的類型，例如直線，圓弧等。

下面教你如何使用 drawPath()方法和drawarrows()方法畫出一對水平和垂直方向的箭頭，後者是一個很是好用的jCanvas方法，可以使你快速的在畫布上繪製一個箭頭形狀：

$myCanvas.drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 10, y: 10,
  p1: {
    type: 'line',
    x1: 100, y1: 100,
    x2: 200, y2: 100
  },
  p2: {
    type: 'line',
    rounded: true,
    endArrow: true,
    arrowRadius: 25,
    arrowAngle: 90,
    x1: 200, y1: 100,
    x2: 290, y2: 100
 },
 p3: {
   type: 'line',
   rounded: true,
   endArrow: true,
   arrowRadius: 25,
   arrowAngle: 90,
   x1: 100, y1: 100,
   x2: 100, y2: 250
  }
});

結果展現：

HTML：

<h2>jCanvas example: Connected Arrows</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS：

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 10, y: 10,
  p1: {
    type: 'line',
    x1: 100, y1: 100,
    x2: 200, y2: 100
  },
  p2: {
    type: 'line',
    rounded: true,
    endArrow: true,
    arrowRadius: 25,
    arrowAngle: 90,
    x1: 200, y1: 100,
    x2: 290, y2: 100
  },
  p3: {
    type: 'line',
    rounded: true,
    endArrow: true,
    arrowRadius: 25,
    arrowAngle: 90,
    x1: 100, y1: 100,
    x2: 100, y2: 250
  }
});

Result:

jCanvas example: Connected Arrows

arrow

繪製文本

你可使用drawText()方法快速的繪製出你須要的文字，這個方法的主要的功能：

  1. text：將此屬性設置爲你想要顯示在畫布上的文字內容：例如：‘Hello World’

  2. fontsize：此屬性的值決定了在畫布上的文字的大小。你能夠爲這個屬性設置爲一個數字，jCanvas默認爲像素。另外，你也可使用pt,可是在這種狀況下，你須要用引號將屬性值包括起來

  3. fontFamily：容許你指定您的文字圖像的字體：'Verdana, sans-serif'。

這裏的示例代碼：

$myCanvas.drawText({
  text: 'Canvas is fun',
  fontFamily: 'cursive',
  fontSize: 40,
  x: 290, y: 150,
  fillStyle: 'lightblue',
  strokeStyle: 'blue',
  strokeWidth: 1
});

在瀏覽器中將是這樣的效果：

HTML:

<h2>jCanvas example: Drawing text</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.drawText({
  text: 'jCanvas is fun',
  fontFamily: 'cursive',
  fontSize: 40,
  x: 290, y: 150,
  fillStyle: 'lightblue',
  strokeStyle: 'blue',
  strokeWidth: 1
});

Result:

jCanvas example: Drawing text

text

繪製圖片

你可使用drawImage()方法來導入和處理圖片。下面是一個例子：

$myCanvas.drawImage({
  source: 'imgs/cat.jpg',
  x: 250, y: 100,
  fromCenter: false,
  shadowColor: '#222',
  shadowBlur: 3,
  rotate: 40
});

這是上面代碼的呈現方式：

HTML:

<h2>jCanvas example: Importing and manipulating an image</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.drawImage({
  source: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/cat.jpg',
  x: 250, y: 100,
  fromCenter: false,
  shadowColor: '#222',
  shadowBlur: 3,
  rotate: 40
});

Result:

jCanvas example: Importing and manipulating an image

image

你能夠隨便的改變上面示例的代碼，戳這裏：CodePen demo

Canvas層

若是你曾經使用過，如Photoshop或Gimp圖像編輯器類的應用程序，你可能會對圖層有所瞭解，使用圖層最爽的地方在於，你能夠在畫布上控制每一個圖像。

jCanvas提供了一個功能強大的API，基於你的畫布增長了靈活性。

這裏介紹瞭如何使用jCanvas的層。

添加圖層

你只能在每個層上繪製一個對象。在你的jCanvas項目中你有兩種添加圖層的方式：

  1. 使用 addLayer()方法，其次是drawLayers()方法

  2. 在任何的繪製方法裏設置layer屬性的值爲true

下面是如何運用第一種技術來繪製一個藍色矩形：

$myCanvas.addLayer({
  type: 'rectangle',
  fillStyle: 'steelblue',
  fromCenter: false,
  name: 'blueRectangle',
  x: 50, y: 50,
  width: 400, height: 200
}).drawLayers();

HTML:

<h2>jCanvas example: Drawing a rectangle with addLayer()</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.addLayer({
  type: 'rectangle',
  fillStyle: 'steelblue',
  fromCenter: false,
  name: 'blueRectangle',
  x: 50, y: 50,
  width: 400, height: 200
}).drawLayers();

Result:

bluerect

這裏是你如何獲得一樣矩形的第二種方法：

$myCanvas.drawRect({
  fillStyle: 'steelblue',
  layer: true,
  name: 'blueRectangle',
  fromCenter: false,
  x: 50, y: 50,
  width: 400, height: 200
});

HTML:

<h2>jCanvas example: Using drawing method with layer set to "true"</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

$myCanvas.drawRect({
  fillStyle: 'steelblue',
  layer: true,
  name: 'blueRectangle',
  fromCenter: false,
  x: 50, y: 50,
  width: 400, height: 200
});

Result:

tworect

正如你所看到的，上面的兩種方法，咱們獲得了相同的結果。

最重要的一點是在上面兩個代碼樣本中能夠發現，上面的層你經過name設置的一個名稱。這使得他易於參照本層的代碼作出各類炫酷的東西，像改變其索引值，動畫，刪除等等。

讓咱們看看如何可以作到這一點。

動畫層

你可使用jCanvas的 animateLayer()方法，快速的在你的基礎圖層上添加動畫，此方法接受如下參數：

  1. 該層的 index 或者 name

  2. 具備鍵值對的動畫對象

  3. 以毫秒爲單位的動畫時長（duration）。這是個默認的參數，若是不設置，默認爲400

  4. 動畫的運動方式（easing ）。這也是一個可選的參數，若是不設置，則默認爲搖擺

  5. 動畫完成以後的回調函數（callback），也是可選的。

讓咱們來看一下animateLayer() 方法的效果，咱們將在一個層上繪製一個半透明的橙色圓圈，而後設置動畫的位置，顏色以及透明度屬性：

// Draw circle
$myCanvas.drawArc({
  name: 'orangeCircle',
  layer: true,
  x: 50, y: 50,
  radius: 100,
  fillStyle: 'orange',
  opacity: 0.5
});

// Animate the circle layer 
$myCanvas.animateLayer('orangeCircle', {
  x: 150, y: 150,
  radius: 50,
}, 1000, function(layer) { // Callback function
  $(this).animateLayer(layer, {
    fillStyle: 'darkred',
    x: 250, y: 100,
    opacity: 1
  }, 'slow', 'ease-in-out');
});

看一下下面例子中的動畫：

HTML:

<h2>jCanvas example: Animating Layers</h2>

<canvas id="myCanvas" width="600" height="300">
  <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>

CSS:

body {
  text-align: center;
}

canvas {
  margin: auto;
  display: block;
}

JS:

// Store the canvas object into a variable
var $myCanvas = $('#myCanvas');

// Draw circle
$myCanvas.drawArc({
  name: 'orangeCircle',
  layer: true,
  x: 50, y: 50,
  radius: 100,
  fillStyle: 'orange',
  opacity: 0.5
});

// Animate the circle layer 
$myCanvas.animateLayer('orangeCircle', {
  x: 150, y: 150,
  radius: 50,
}, 1000, function(layer) { // Callback function
  $(this).animateLayer(layer, {
    fillStyle: 'darkred',
    x: 250, y: 100,
    opacity: 1
  }, 'slow', 'ease-in-out');
});

Result:

jCanvas example: Animating Layers

red

可拖動圖層

我想提醒你注意的是它還有一個很酷的功能，你能夠在可拖動層裏設置draggable屬性和layer 屬性的值爲true，就能夠將一個普通的jCanvas層變成可拖動的層了。

具體方法以下：

$myCanvas.drawRect({
  layer: true,
  draggable: true,
  bringToFront: true,
  name: 'blueSquare',
  fillStyle: 'steelblue',
  x: 250, y: 150,
  width: 100, height: 100,
  rotate: 80,
  shadowX: -1, shadowY: 8,
  shadowBlur: 2,
  shadowColor: 'rgba(0, 0, 0, 0.8)'
})
.drawRect({
  layer: true,
  draggable: true,
  bringToFront: true,
  name: 'redSquare',
  fillStyle: 'red',
  x: 190, y: 100,
  width: 100, height: 100,
  rotate: 130,
  shadowX: -2, shadowY: 5,
  shadowBlur: 3,
  shadowColor: 'rgba(0, 0, 0, 0.5)'
});

在上面的代碼段中，經過把屬性draggable設置爲true，繪製出了兩個可拖動的矩形層。此外，請當心使用bringToFront屬性，以確保當你拖動層時，他會被自動拖到全部其餘現有的圖層的前面。

最後，在上述代碼段中添加旋轉圖層的代碼而且設置一個盒子陰影，只是爲了告訴你如何快速的在你的jCanvas圖紙上添加一些特效。

結果會是這樣的：

rotate

若是你想在在你拖動圖層以前，之間或者以後作一些事情的話，jCanvas 能夠很容易的利用相關的回調函數來實現這一點：

  1. dragstart：當你開始拖動圖層的時候的觸發器

  2. drag：當你正在拖動圖層時發生

  3. dragstop：當你中止拖動圖層時的觸發器

  4. dragcancel：當你拖動的圖層到了畫布表面的邊界時發生

比方說，當用戶完成拖動層以後，你想在頁面上顯示一條消息，你能夠經過添加一個回調函數dragstop來實現，就像這樣：

$myCanvas.drawRect({
  layer: true,

  // Rest of the code as shown above...

  // Callback function
  dragstop: function(layer) {
    var layerName = layer.name;
    el.innerHTML = 'The ' + layerName + ' layer has been dropped.';
  }
})
.drawRect({
  layer: true,

  // Rest of the code...

  // Callback function
  dragstop: function(layer) {
    var layerName = layer.name;
    el.innerHTML = 'The ' + layerName + ' layer has been dropped.';
  }
});

結論

在這篇文章中，我向你介紹了jCanvas，一個新的基於jQuery能與HTML5的 Canvas API一塊兒使用的庫。我已經簡單的介紹了一些jCanvas的屬性和方法，可以讓你快速的在畫布和是哪一個繪製圖形，增長視覺效果，動畫和拖動圖層。

你能夠訪問jCanvas文檔，這裏有不少的詳細指導和示例。你要能夠在 jCanvas網站的 sandbox上進行快速測試。

做者信息

原文做者：Maria Antonietta Perna
原文連接：http://t.cn/Rt82jVj
翻譯自力譜宿雲 LeapCloud旗下MaxLeap團隊_前端研發人員：Ammie白
中文翻譯首發：https://blog.maxleap.cn/archi...
譯者簡介：新晉前端一枚，目前負責 MaxLeap 網站展現性內容的實現。喜歡本身嘗試寫一些js特效小Demo。

相關文章
無需Flash實現圖片裁剪——HTML5中級進階

做者往期佳做
如何結合Gulp使用PostCss

活動預告

clipboard.png

報名連接：http://t.cn/Rt9ooRw

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程