My Favorite 5 JavaScript Canvas Libraries – HTML5 - Crunchify

Trang chủ » Html5 Canvas Alternatives » My Favorite 5 JavaScript Canvas Libraries – HTML5 - Crunchify

Có thể bạn quan tâm

html5-canvas

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Here is a sample HTML canvas example:

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="290" height="80" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Georgia"; ctx.strokeText("Crunchify.com Test",10,50); </script> </body> </html>

Output:

Crunchify.com Test

My Favorite JavaScript Canvas Libraries:

1) bHive.js Library:

Create rich user experiences, animations, games and applications with bHive, a HTML 5 canvas framework API built to make developing easier, so you can start creating straight away.

bHive javascript library

Link: http://www.bhivecanvas.com/

2) BitmapDataChannels Library:

HTML5 Canvas API implementation of the AS3 BitmapData class.

BitmapDataChannels javascript library

Link: https://github.com/pnitsch/BitmapData.js

3) Paper.js Library:

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

paper.js javascript library

Link: http://paperjs.org/

4) HTML Canvas Library:

HTML canvas library is a full-featured lightweight wrapper library of the native html canvas element written in Javascript, aimed to make visualization and animation using canvas simpler. Features animation support, layers, event capture, multitouch and many examples.

HTML Canvas javascript library

Link: http://html-canvas-lib.sourceforge.net/

5) Fabric.js Library:

Fabric.js is a powerful and simple Javascript canvas library. Fabric provides interactive object model on top of canvas element. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.

Febric.js javascript library

Link: http://fabricjs.com/

Which one is your favorite one? Let us know in comment section below.

If you liked this article, then please share it on social media. Have a question or suggestion? Please leave a comment to start the discussion.

Suggested Articles...

  1. The Power of HTML5
  2. Some of my Favorite JavaScript Tips and Tricks Tutorials
  3. How to Iterate through JSONArray in JavaScript
  4. In Java How to Create XML File using DOM parser? Writing Out a DOM as an XML File
  5. How to Report / Print List of All Loaded Spring Beans during your Spring MVC Application Startup
  6. Create Super fast Social Sharing Buttons without JavaScript with simple CSS

Từ khóa » Html5 Canvas Alternatives