如果你只想要一款方便、快速、简单的Canvas 2D绘图工具,那选C5.js吧。
C5.js is a Canvas(HTML5) plugin that provides a simple canvas for users draw with some shapes and colors.
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);
});
});
new C5(width, height);
new C5({
width?: number,
height?: number,
canvas?: HTMLCanvasElement,
autoStart?: boolean,
contextAttributes?: any,
});
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;
isRunning: boolean;