前端开发的重要一环便是图形绘制，但是Javascript自带的绘图功能有限，在高级绘图功能上非常不足。为了弥补这一问题，各种Javascript2D绘图库开始出现，例如EaselJS、Paper.js，本文将着重讲解这些工具的使用和优点。

Paper.js

Paper.js是一款轻量级的基于HTML5的矢量图形Javascript库，拥有出色的画布绘制和动画处理。下面我们来看一个简单的例子。HTML代码如下：

<!-- 引入Paper.js --><script src="https://cdnjs.cloudflare/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script><canvas id="myCanvas" resize="true"></canvas>

然后在Javascript代码中我们可以使用Paper.js来进行绘制工作：

<script>// 定义画布和路径var canvas = document.getElementById('myCanvas');paper.setup(canvas);var path = new paper.Path();// 绘制路径path.strokeColor = 'black';var start = new paper.Point(100, 100);path.moveTo(start);path.lineTo(start.add([ 200, -50 ]));// 渲染画布paper.view.draw();</script>

EaselJS

EaselJS是一个面向HTML5 Canvas的Javascript库，它为开发者提供了完善的绘图基础设施。

使用EaselJS来创建一个简单画板的例子。HTML代码如下：

<!-- 引入 EaselJS --><script src="https://code.createjs/easeljs-0.8.2.min.js"></script><canvas id="canvas"  ></canvas>

Javascript代码如下：

<script>var canvas, stage, color = "black", size = 4, oldPt, oldMidPt, drawingCanvas, drawingArea;function init() {canvas = document.getElementById("canvas");stage = new createjs.Stage(canvas);stage.autoClear = false;stage.enableDOMEvents(true);createjs.Touch.enable(stage);createjs.Ticker.framerate = 24;drawingCanvas = new createjs.Shape();stage.addEventListener("stagemousedown", handleMouseDown);stage.addEventListener("stagemouseup", handleMouseUp);stage.addChild(drawingCanvas);stage.update();}function handleMouseDown(event) {if (stage.contains(event.target)) {color = "#"+((1<<24)*Math.random()|0).toString(16);size = 4;oldPt = new createjs.Point(stage.mouseX, stage.mouseY);oldMidPt = oldPt;stage.addEventListener("stagemousemove", handleMouseMove);}}function handleMouseMove(event) {if (stage.contains(event.target)) {var midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);drawingCanvas.graphics.setStrokeStyle(size, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);oldPt.x = stage.mouseX;oldPt.y = stage.mouseY;oldMidPt.x = midPt.x;oldMidPt.y = midPt.y;stage.update();}}function handleMouseUp(event) {if (stage.contains(event.target)) {stage.removeEventListener("stagemousemove", handleMouseMove);}}init();</script>

以上代码定义了一个画板，用户可以在画板上以鼠标建立各种颜色、粗细的线条。

结语

Javascript2D绘图库为前端开发提供了更便捷和强大的图形绘制方式，可以实现各种高级绘图效果。本文介绍了两款主流的Javascript2D绘图库，使得前端开发者们可以在更加简单的条件下实现复杂的图形绘制和交互操作。