??? ????? ??: ????? ???? ??? ?????? ???? ????? ?? ?? ??? ?????.

??: ???? HTML5?? ???? ??? API?, ?? ?? ??? ??? ? ????? ??? ?? ? ????. ???? ???? ???? ????? ?? ?? ????? ??? Canvas ?????? ??????. ? ????? ????? ???? ? ?? ??? ?????? ???? ??? ??? ?????? ???? ??? ? ?? ???? ? ??? ?? ?? ?? ??? ?????.

1. EaselJS ?????
EaselJS? Adobe?? ??? Canvas ?????? ??? ??? ? ????? ??? ?? ? ?? ???? ??? API ??? ?????. ??? EaselJS ?????? ??? ??? ?? ?????.

// 創(chuàng)建舞臺
var stage = new createjs.Stage("canvas");

// 創(chuàng)建一個形狀
var shape = new createjs.Shape();
shape.graphics.beginFill("red").drawCircle(0, 0, 50);
shape.x = 100;
shape.y = 100;

// 將形狀添加到舞臺中
stage.addChild(shape);

// 更新舞臺
createjs.Ticker.addEventListener("tick", stage);

? ??? ???(id? "canvas")? ???? ???? ??? ?? ?? ? ????? ?????. ? ???? ?? ??? ????? ???? ?????? ????? ??? ?? ? ????.

2. Paper.js ?????
Paper.js? Canvas? ???? ??? ???? ?? ? ?? ?? ??? ?? JavaScript ????????. ??? Paper.js ?????? ???? ??? ??? ?? ?????.

// 創(chuàng)建Canvas
var canvas = document.getElementById('canvas');
paper.setup(canvas);

// 繪制一個圓
var circle = new paper.Path.Circle(new paper.Point(100, 100), 50);
circle.fillColor = 'red';

// 繪制一個矩形
var rectangle = new paper.Path.Rectangle(new paper.Point(200, 100), new paper.Size(100, 100));
rectangle.fillColor = 'blue';

// 更新視圖
paper.view.draw();

? ??? ???(id? "canvas")? ??? ???? ??? ?? ??? ????? ????. ?? ??? ???? paper.view.draw() ???? ???? ?? ???????. paper.view.draw()方法來更新視圖，從而實(shí)現(xiàn)顯示效果。

三、Fabric.js框架
Fabric.js是一個基于Canvas的繪圖庫，它可以通過簡單的API來繪制和修改圖形。下面是一個使用Fabric.js框架實(shí)現(xiàn)的簡單示例代碼：

// 創(chuàng)建Canvas
var canvas = new fabric.Canvas('canvas');

// 繪制一個矩形
var rectangle = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'green',
  width: 100,
  height: 100
});

// 添加矩形到Canvas
canvas.add(rectangle);

// 繪制一個圓
var circle = new fabric.Circle({
  left: 200,
  top: 200,
  fill: 'red',
  radius: 50
});

// 添加圓到Canvas
canvas.add(circle);

以上代碼創(chuàng)建了一個Canvas，并在其中繪制了一個綠色的矩形和一個紅色的圓。通過canvas.add()

3. Fabric.js ?????

Fabric.js? ??? API? ?? ???? ??? ??? ? ?? ??? ?? ??? ????????. ??? Fabric.js ?????? ???? ??? ??? ?? ?????.
rrreee

? ??? ???? ??? ? ?? ?? ????? ??? ?? ????. canvas.add() ???? ?? ???? ???? ?????.

??:

?? ?? ??? ?? ??? Canvas ?????? ?? ??? ??? ??? ??? ? ? ??? ????? ??? ??? ? ????? ??? ??? ?? ? ??? ???? ???? ??? API? ?????. ???? ?? ?? ???? ??? ??? ????? ?? ??? ??? ?? ?? ?????? ???? ???? ??? ? ????.
1. ????:
3. EaselJS ?? ??: https://createjs.com/docs/easeljs/

Paper.js ?? ??: http://paperjs.org/

Fabric.js ?? ??: http: / /fabricjs.com/??????(???: 495)??

? ??? ??? ?????? ??? ????? ???? ??? ?????? ?? ??? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!