簡(jiǎn)介 jCanvas：當(dāng) jQuery遇上HTML5 Canvas

QiuyueZhong 發(fā)布于2019-08-21 14:18 / 1012人閱讀

摘要：上面的代碼片段表示，存儲(chǔ)對(duì)象到一個(gè)名為的變量中。這也是一個(gè)可選的參數(shù)，如果不設(shè)置，則默認(rèn)為搖擺動(dòng)畫(huà)完成之后的回調(diào)函數(shù)，也是可選的。

HTML5 可以直接在你的網(wǎng)頁(yè)中使用元素及其相關(guān)的 JavaScript API繪制的圖形。

在這篇文章中，我將向你介紹 jCanvas，一個(gè)基于 jQuery的免費(fèi)且開(kāi)源的 HTML5的Canvas API。

如果你使用 jQuery 進(jìn)行開(kāi)發(fā)，jCanvas能夠使用 jQuery更簡(jiǎn)單，更快速的完成一些非常炫酷的 canvas畫(huà)布及交互效果。

什么是 jCanvas ？

jCanvas 官網(wǎng)是這樣解釋的：

“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.

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

jCanvas 能讓你做的一切事情，你都可以用原生的Canvas API來(lái)實(shí)現(xiàn)，甚至可以做更多的事情。如果你愿意的話，你也可以將原生的Canvas API方法和 jCanvas一起使用。draw()方法就可以這樣使用。此外，你還可以非常輕松的用自己的方法結(jié)合 extend()函數(shù)來(lái)擴(kuò)展jCanvas的功能。

添加jCanvas 到你的項(xiàng)目中

將jCanavs添加在你的項(xiàng)目中，從官方網(wǎng)站或GitHub的頁(yè)面上下載腳本，然后將腳本文件放在你的項(xiàng)目文件夾中。正如前面說(shuō)的，jCanvas需要依賴 jQuery才能正常工作，所以還要確保引入了 jQuery文件。

項(xiàng)目的腳本文件將是這個(gè)樣子：



下面是矩形的示例代碼：
HTML：
jCanvas example: Rectangle



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

圓弧和圓
弧是一個(gè)圓的邊緣部分。對(duì)于jCanvas來(lái)說(shuō)，畫(huà)一個(gè)圓弧僅僅是在 drawArc() 方法里設(shè)置幾個(gè)所需的屬性：
$myCanvas.drawArc({
  strokeStyle: "steelblue",
  strokeStyle: "blue",
  strokeWidth: 4,
  x: 300, y: 100,
  radius: 50,
  // start and end angles in degrees
  start: 0, end: 200
});

繪制弧形，需要設(shè)置半徑屬性的值，以及開(kāi)始的角度和結(jié)束的角度。如果你希望弧形是逆時(shí)針?lè)较虻脑挘枰砑右粋€(gè)ccw屬性，并將其屬性值設(shè)置為true。
下面是上述代碼塊演示：
HTML:
jCanvas example: Arc




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

繪制一個(gè)圓形：
舉例來(lái)說(shuō)，下面是如何只使用圓弧形狀來(lái)繪制出一個(gè)簡(jiǎn)單的笑臉圖形：
$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
});    

請(qǐng)記住，jCanvas是基于jQuery的，因此，你可以像jQuery的鏈?zhǔn)讲僮饕粯?，在jCanvas中也可以使用鏈?zhǔn)讲僮鳌?/p>
下面是以上代碼在瀏覽器中的效果：
HTML:
jCanvas example: Smiling Face



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

繪制線條和路徑
你可以用drawLine()方法快速的繪制直線，或者定義一系列的線條的連接點(diǎn)。
$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
});

上面代碼設(shè)置了 rounded和closed屬性的值為true，從而所繪制的線和角都是閉合的。
HTML:
jCanvas example: Connected lines




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

還可以使用drawPath()方法繪制路徑。
該drawPath()方法設(shè)置 x 和 y值，你還需要制定你要繪制的路徑的類型，例如直線，圓弧等。
下面教你如何使用 drawPath()方法和drawarrows()方法畫(huà)出一對(duì)水平和垂直方向的箭頭，后者是一個(gè)非常好用的jCanvas方法，能夠使你快速的在畫(huà)布上繪制一個(gè)箭頭形狀：
$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
  }
});


結(jié)果展示：
HTML：
jCanvas example: Connected Arrows

    


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

繪制文本
你可以使用drawText()方法快速的繪制出你需要的文字，這個(gè)方法的主要的功能：

text：將此屬性設(shè)置為你想要顯示在畫(huà)布上的文字內(nèi)容：例如：‘Hello World’

fontsize：此屬性的值決定了在畫(huà)布上的文字的大小。你可以為這個(gè)屬性設(shè)置為一個(gè)數(shù)字，jCanvas默認(rèn)為像素。另外，你也可以使用pt,但是在這種情況下，你需要用引號(hào)將屬性值包括起來(lái)

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:
jCanvas example: Drawing text




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

繪制圖片
你可以使用drawImage()方法來(lái)導(dǎo)入和處理圖片。下面是一個(gè)例子：
$myCanvas.drawImage({
  source: "imgs/cat.jpg",
  x: 250, y: 100,
  fromCenter: false,
  shadowColor: "#222",
  shadowBlur: 3,
  rotate: 40
});

這是上面代碼的呈現(xiàn)方式：
HTML:
jCanvas example: Importing and manipulating an image


    

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

你可以隨便的改變上面示例的代碼，戳這里：CodePen demo
Canvas層
如果你曾經(jīng)使用過(guò)，如Photoshop或Gimp圖像編輯器類的應(yīng)用程序，你可能會(huì)對(duì)圖層有所了解，使用圖層最爽的地方在于，你可以在畫(huà)布上控制每個(gè)圖像。
jCanvas提供了一個(gè)功能強(qiáng)大的API，基于你的畫(huà)布增加了靈活性。
這里介紹了如何使用jCanvas的層。
添加圖層
你只能在每一個(gè)層上繪制一個(gè)對(duì)象。在你的jCanvas項(xiàng)目中你有兩種添加圖層的方式：

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

在任何的繪制方法里設(shè)置layer屬性的值為true


下面是如何運(yùn)用第一種技術(shù)來(lái)繪制一個(gè)藍(lán)色矩形：
$myCanvas.addLayer({
  type: "rectangle",
  fillStyle: "steelblue",
  fromCenter: false,
  name: "blueRectangle",
  x: 50, y: 50,
  width: 400, height: 200
}).drawLayers();


HTML:
jCanvas example: Drawing a rectangle with addLayer()



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:

這里是你如何得到同樣矩形的第二種方法：
$myCanvas.drawRect({
  fillStyle: "steelblue",
  layer: true,
  name: "blueRectangle",
  fromCenter: false,
  x: 50, y: 50,
  width: 400, height: 200
});


HTML:
jCanvas example: Using drawing method with layer set to "true"





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:

正如你所看到的，上面的兩種方法，我們得到了相同的結(jié)果。
最重要的一點(diǎn)是在上面兩個(gè)代碼樣本中可以發(fā)現(xiàn)，上面的層你通過(guò)name設(shè)置的一個(gè)名稱。這使得他易于參照本層的代碼做出各種炫酷的東西，像改變其索引值，動(dòng)畫(huà)，刪除等等。
讓我們看看如何能夠做到這一點(diǎn)。
動(dòng)畫(huà)層
你可以使用jCanvas的 animateLayer()方法，快速的在你的基礎(chǔ)圖層上添加動(dòng)畫(huà)，此方法接受以下參數(shù)：

該層的 index 或者 name

具有鍵值對(duì)的動(dòng)畫(huà)對(duì)象

以毫秒為單位的動(dòng)畫(huà)時(shí)長(zhǎng)（duration）。這是個(gè)默認(rèn)的參數(shù)，如果不設(shè)置，默認(rèn)為400

動(dòng)畫(huà)的運(yùn)動(dòng)方式（easing ）。這也是一個(gè)可選的參數(shù)，如果不設(shè)置，則默認(rèn)為搖擺

動(dòng)畫(huà)完成之后的回調(diào)函數(shù)（callback），也是可選的。


讓我們來(lái)看一下animateLayer() 方法的效果，我們將在一個(gè)層上繪制一個(gè)半透明的橙色圓圈，然后設(shè)置動(dòng)畫(huà)的位置，顏色以及透明度屬性：
// 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");
});
    



看一下下面例子中的動(dòng)畫(huà)：
HTML:
jCanvas example: Animating Layers


    

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

可拖動(dòng)圖層
我想提醒你注意的是它還有一個(gè)很酷的功能，你可以在可拖動(dòng)層里設(shè)置draggable屬性和layer 屬性的值為true，就可以將一個(gè)普通的jCanvas層變成可拖動(dòng)的層了。
具體方法如下：
$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)"
});
    

在上面的代碼段中，通過(guò)把屬性draggable設(shè)置為true，繪制出了兩個(gè)可拖動(dòng)的矩形層。此外，請(qǐng)小心使用bringToFront屬性，以確保當(dāng)你拖動(dòng)層時(shí)，他會(huì)被自動(dòng)拖到所有其他現(xiàn)有的圖層的前面。
最后，在上述代碼段中添加旋轉(zhuǎn)圖層的代碼并且設(shè)置一個(gè)盒子陰影，只是為了告訴你如何快速的在你的jCanvas圖紙上添加一些特效。
結(jié)果會(huì)是這樣的：

如果你想在在你拖動(dòng)圖層之前，之間或者之后做一些事情的話，jCanvas 可以很容易的利用相關(guān)的回調(diào)函數(shù)來(lái)實(shí)現(xiàn)這一點(diǎn)：

dragstart：當(dāng)你開(kāi)始拖動(dòng)圖層的時(shí)候的觸發(fā)器

drag：當(dāng)你正在拖動(dòng)圖層時(shí)發(fā)生

dragstop：當(dāng)你停止拖動(dòng)圖層時(shí)的觸發(fā)器

dragcancel：當(dāng)你拖動(dòng)的圖層到了畫(huà)布表面的邊界時(shí)發(fā)生


比方說(shuō)，當(dāng)用戶完成拖動(dòng)層之后，你想在頁(yè)面上顯示一條消息，你可以通過(guò)添加一個(gè)回調(diào)函數(shù)dragstop來(lái)實(shí)現(xiàn)，就像這樣：
$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.";
  }
});

結(jié)論
在這篇文章中，我向你介紹了jCanvas，一個(gè)新的基于jQuery能與HTML5的 Canvas API一起使用的庫(kù)。我已經(jīng)簡(jiǎn)單的介紹了一些jCanvas的屬性和方法，能夠讓你快速的在畫(huà)布和是哪個(gè)繪制圖形，增加視覺(jué)效果，動(dòng)畫(huà)和拖動(dòng)圖層。
你可以訪問(wèn)jCanvas文檔，這里有很多的詳細(xì)指導(dǎo)和示例。你要可以在 jCanvas網(wǎng)站的 sandbox上進(jìn)行快速測(cè)試。

作者信息
原文作者：Maria Antonietta Perna
原文鏈接：http://t.cn/Rt82jVj
翻譯自力譜宿云 LeapCloud旗下MaxLeap團(tuán)隊(duì)_前端研發(fā)人員：Ammie白
中文翻譯首發(fā)：https://blog.maxleap.cn/archi...
譯者簡(jiǎn)介：新晉前端一枚，目前負(fù)責(zé) MaxLeap 網(wǎng)站展示性內(nèi)容的實(shí)現(xiàn)。喜歡自己嘗試寫(xiě)一些js特效小Demo。
相關(guān)文章
無(wú)需Flash實(shí)現(xiàn)圖片裁剪——HTML5中級(jí)進(jìn)階
作者往期佳作
如何結(jié)合Gulp使用PostCss

活動(dòng)預(yù)告

報(bào)名鏈接：http://t.cn/Rt9ooRw

GPU云服務(wù)器云服務(wù)器當(dāng)webrtc遇上專網(wǎng)防火墻 HTML5 Canvas html5的canvas html5Canvas

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87866.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

QiuyueZhong

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ftp的主機(jī)用戶名和密碼是什么-ftp主機(jī)地址是什么？

閱讀 3209·2021-09-22 14:59
基于R和Python的極大似然估計(jì)的牛頓法實(shí)現(xiàn)

閱讀 2012·2021-09-22 10:02
OuluCloud：CN2 GIA線路高防禦服務(wù)器/香港/聖何塞/洛杉磯/加拿大/500GDDOS防

閱讀 2181·2021-09-04 16:48
JS基礎(chǔ)入門篇（三十四）— 面向?qū)ο螅ㄒ唬?/a>

閱讀 2324·2019-08-30 15:53

移動(dòng)端:web前端實(shí)用小技巧

閱讀 3039·2019-08-30 11:27
word-wrap & word-break & white-space

閱讀 3509·2019-08-29 18:35
前端 CSS : 2# 純 CSS 實(shí)現(xiàn)多彩的 Buttons(box-shadow)

閱讀 1018·2019-08-29 17:07
自制，簡(jiǎn)易仿京東微信小程序demo

閱讀 2732·2019-08-29 13:27

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

簡(jiǎn)介 jCanvas：當(dāng) jQuery遇上HTML5 Canvas

jCanvas example: Rectangle

jCanvas example: Arc

jCanvas example: Smiling Face

jCanvas example: Connected lines

jCanvas example: Connected Arrows

jCanvas example: Drawing text

jCanvas example: Importing and manipulating an image

jCanvas example: Drawing a rectangle with addLayer()

jCanvas example: Using drawing method with layer set to "true"

jCanvas example: Animating Layers

相關(guān)文章

Sass Mixin 和 Media Merging

**【譯】HTML5 游戲入門**

發(fā)表評(píng)論

0條評(píng)論

QiuyueZhong

男|高級(jí)講師

TA的文章

ftp的主機(jī)用戶名和密碼是什么-ftp主機(jī)地址是什么？

基于R和Python的極大似然估計(jì)的牛頓法實(shí)現(xiàn)

OuluCloud：CN2 GIA線路高防禦服務(wù)器/香港/聖何塞/洛杉磯/加拿大/500GDDOS防

JS基礎(chǔ)入門篇（三十四）— 面向?qū)ο螅ㄒ唬?/a>

移動(dòng)端:web前端實(shí)用小技巧

word-wrap & word-break & white-space

前端 CSS : 2# 純 CSS 實(shí)現(xiàn)多彩的 Buttons(box-shadow)

自制，簡(jiǎn)易仿京東微信小程序demo

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

簡(jiǎn)介 jCanvas：當(dāng) jQuery遇上HTML5 Canvas

jCanvas example: Rectangle

jCanvas example: Arc

jCanvas example: Smiling Face

jCanvas example: Connected lines

jCanvas example: Connected Arrows

jCanvas example: Drawing text

jCanvas example: Importing and manipulating an image

jCanvas example: Drawing a rectangle with addLayer()

jCanvas example: Using drawing method with layer set to "true"

jCanvas example: Animating Layers

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！