C5.js

如果你只想要一款方便、快速、简单的Canvas 2D绘图工具，那选C5.js吧。

C5.js is a Canvas(HTML5) plugin that provides a simple canvas for users draw with some shapes and colors.

Getting Started

var c5 = new C5();

var ball = {
    x: c5.width / 2,
    y: c5.height / 2,
    radius: 25,
    color: "red",
    vx: 5,
    vy: 5
};

c5.draw(function () {
    ball.x += ball.vx;
    ball.y += ball.vy;

    if (ball.x < ball.radius) {
        ball.x = ball.radius;
        ball.vx *= -1;
    }
    else if (ball.x > this.width - ball.radius) {
        ball.x = this.width - ball.radius
        ball.vx *= -1;

    }

    if (ball.y < ball.radius) {
        ball.y = ball.radius;
        ball.vy *= -1;
    }
    else if (ball.y > this.height - ball.radius) {
        ball.y = this.height - ball.radius
        ball.vy *= -1;
    }

    this.bg()
        .circle(ball.x, ball.y, ball.radius)
        .fill(ball.color);

});

var c5 = new C5();

c5.draw(function(elapsedMS){
     this.bg()          // or gl.clear()
       // draw line
       .line(0,20,50,20)
       .stroke("white")
       // draw circle
       .circle(50,50,20)
       .fill(255);    // rgba(255, 0 ,0, 1)
});

var c5=new C5(600,500);

var img;
var imgX=50;
var imgY=60;

c5.preload(function(reslove){
    img=new Image();
    img.onload=function(){
        reslove();
    };
    img.src="a.png";    
}).setup(function(){
     this.on("click",function(x,y){
        imgX=x-img.width/2;
        imgY=y-img.height/2;
     });
}).draw(function(){
    this.clear()
        .img(img,imgX,imgY);
});

var c5=new C5();

// use CanvasRenderingContext2D
c5.draw(function(){
    this.clear()
        .use(function(ctx){
            ctx.beginPath();
            ctx.fillRect(10,10,50,80);
        });
});

Constructor Options

   new C5(width, height);

   new C5({
        width?: number,
        height?: number,
        canvas?: HTMLCanvasElement,
        autoStart?: boolean,
        contextAttributes?: any,
   });

Methods

    now(): number;
    tick(func: FrameRequestCallback): number;
    stopTick(t: number): void;
    start(): C5;
    stop(): C5;
    preload(f: Function): C5;
    setup(f: Function): C5;
    draw(f: Function): C5;
    bg(): C5;
    blend(bl: boolean): C5;
    clear(): C5;
    stroke(): C5;
    fill(): C5;
    lineWidth(w: number): C5;
    alpha(a: number): C5;
    translate(x: number, y: number): C5;
    rotate(rad: number): C5;
    scale(x: number, y: number): C5;
    save(): C5;
    restore(): C5;
    moveTo(x: number, y: number): C5;
    beginPath(): C5;
    closePath(): C5;
    use(fun: UseFunc, _this?: any): C5;
    line(x0: number, y0: number, x1: number, y1: number): C5;
    arc(x: number, y: number, r: number, sAngle: number, eAngle: number, counterclockwise?: boolean): C5;
    quad(cpx: number, cpy: number, x: number, y: number): C5;
    bezier(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): C5;
    circle(x: number, y: number, radius: number): C5;
    ellipse(x: number, y: number, rx: number, ry: number): C5;
    rect(x: number, y: number, w: number, h: number): C5;
    polygon(vertices: [any]): C5;
    img(img: HTMLImageElement | HTMLCanvasElement, x?: number, y?: number): C5;

    on(type: string, f: Function, options: any): C5;
    off(type: string, f: Function, options: any): C5;

Properties

    isRunning: boolean;