ooCanvas - Object-based canvas drawing

ooCanvas移植自著名的canvsa渲染框架 oCanvas http://ocanvas.org/。在原框架基础上做了一些压缩和删减工作，但是保留了基本的功能，体积减少了一半以上（gzip <10k）。

删减内容

• 删除如下文件
• ./src/keyboard
• ./src/mouse
• ./src/touch
• ./src/scenes
• ./src/displayobjects/rectangle
• ./src/displayobjects/arc
• ./src/displayobjects/line
• ./src/displayobjects/sprite
• 删除各种渐变色
• 删除阴影功能
• 删除displayobject clone
• 删除displayobject trigger
• 删除displayobject dragAndDrop
• 删除displayobject fadeIn
• 删除displayobject fadeOut
• 删除displayobject fadeTo
• 删除displayobject scaleTo
• 删除displayobject isPointerInside
• 删除动画 ease-*-bounce
• 删除动画 ease-*-expo
• 删除动画 ease-*-sine
• 删除动画 ease-*-sine
• 删除动画 ease-*-elastic

文档

All the documentation can be found at the website, http://ocanvas.org/

使用

npm i oocanvas --save

import oCanvas from 'oocanvas';

const canvas = oCanvas.create({
    canvas: "#canvas"
});

const text = canvas.display.text({
    x: 220,
    y: 220,
    origin: { x: "center", y: "center" },
    align: "center",
    font: "bold 25px sans-serif",
    text: "Toggle Rotation",
    fill: "#000"
});

const arc = canvas.display.arc({
    x: canvas.width / 3.5,
    y: 150,
    radius: 60,
    start: 40,
    end: 260,
    fill: "#079",
    pieSection: true
});
const pentagon = canvas.display.polygon({
    x: canvas.width / 1.5,
    y: arc.y,
    sides: 5,
    radius: 60,
    fill: "#18a"
});

canvas.addChild(text);
canvas.addChild(arc);
canvas.addChild(pentagon);

const dragOptions = { changeZindex: true };

canvas.setLoop(function () {
    arc.rotation++;
    pentagon.rotation--;
});

canvas.timeline.start();

感谢

感谢Johannes Koggdal开发了这么好用的框架，真的很赞✌渲染效率也超高，感谢作者的无私精神！