fabirc 是一个比较简单的和强大的canvas插件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./fabric.js"></script>
</head>
<body>
<canvas width="800px" height="800px" id="c"></canvas>
<script type="text/javascript">
var canvas=new fabric.Canvas('c')
var rect=new fabric.Rect({ //画一个正方形
left:100,
top:100,
width:100,
height:100,
fill:'red'
})
//animate (方向,距离像素,对象属性)三个参数
rect.animate('left',500,{
onChange:canvas.renderAll.bind(canvas),
duration:2000,
easing:fabric.util.ease.easeOutCubic
})
canvas.add(rect)
</script>
</body>
</html>
image.png
网友评论