一个简单的canvas动画库，可用来制作动画或简单游戏
npm: npm install anicanvas
本地：将dist目录下的anicanvas.min.js放到使用目录
CDN: https://cdn.jsdelivr.net/npm/anicanvas/dist/anicanvas.min.js (最新版地址，指定版本可在anicanvas后添加@0.0.x版本号)
简单的实例(es6语法)
import Anicanvas from 'anicanvas'
const app = new Anicanvas('#app', {width: 200, height: 100}); //创建实例
const ballPainter = new Anicanvas.Painter((sprite, context, time, fdelta) => {
let {left, top, width, height, rotatePoint: {x, y}} = sprite; //rotatePoint为精灵中心坐标，免去计算
context.save();
context.beginPath();
context.globalAlpha = sprite.opacity;
context.fillStyle = "red";
context.arc(x, y, width / 2, 0, Math.PI*2);
context.fill();
context.restore();
});
const ballBehaviors = [
new Anicanvas.Behavior({
name: 'rollRight',
duration:1000,
animation: {left: 50}
}),
new Anicanvas.Behavior({
name: 'rollDown',
duration:1000,
delay: 1000, //延迟1000ms执行，让rollRight先执行完
animation: {
0: {opacity: 1},
100: {top: 50, opacity: 0.5}
}
})
];
const ball = new Anicanvas.Sprite('ball', {needAutoRP: true, width: 20, height: 20}, ballPainter, ballBehaviors);
app.append(ball);
app.start();
浏览器端
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div class="wrap" id="app" style="border: 1px solid #aeaeae;width: 200px;height: 100px;">
</div>
<script src="https://cdn.jsdelivr.net/npm/anicanvas/dist/anicanvas.min.js"></script>
<script>
var app = new Anicanvas('#app', {width: 200, height: 100});
var bgPainter = new Anicanvas.Painter(function(sprite, context, time, fdelta){
context.save();
context.fillStyle = "#efefef";
context.fillRect(sprite.left, sprite.top, sprite.width, sprite.height);
context.restore();
});
var ballPainter = new Anicanvas.Painter(function(sprite, context, time, fdelta) {
let width = sprite.width,
rotatePoint = sprite.rotatePoint,
x = rotatePoint.x,
y = rotatePoint.y;
context.save();
context.globalAlpha = sprite.opacity;
context.beginPath();
context.fillStyle = "red";
context.arc(x, y, width / 2, 0, Math.PI*2);
context.fill();
context.restore();
});
var ballBehaviors = [
new Anicanvas.Behavior({
name: 'rollRight',
duration:1000,
animation: {left: 50}
}),
new Anicanvas.Behavior({
name: 'rollDown',
duration: 1000,
delay: 1000,
animation: {top: 50, opacity: 0.4}
})
];
var bgLayer = new Anicanvas.Sprite('bg', {width: 200, height: 100}, bgPainter);
var ball = new Anicanvas.Sprite('ball', {needAutoRP: true, width: 20, height: 20, opacity: 1}, ballPainter, ballBehaviors);
app.append(bgLayer, ball);
app.start();
</script>
</body>
</html>
在根目录下使用命令行工具运行 npm start 命令可开启本地node服务器来访问demo npm run demo-es5 可监听demo/js/index.js文件的修改并编译为es5环境代码，刷新页面可以看到修改后的效果
FAQs
a canvas library for animation scene in html
We found that anicanvas demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.