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') //获取canvas
var path=new fabric.Path('M 0 0 L 400 100 L 170 200 z');//画路径
//m 是坐标 从0开始 l x轴200 y轴100 是链接的拒绝 200像素到100像素连接起来 z是闭合线
// puth.set 路径设置 set letf距离左边 top距离顶部 fill 画颜色
path.set({
left:120,
top:120,
fill:'red'
})
canvas.add(path)
</script>
</body>
</html>
image.png
网友评论