zrender基础⼊门，简单的案例图形绘制
⼀、简单介绍
ZRender是⼆维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染⽅式。ZRender也是ECharts的渲染器。
流程图：
⼆、使⽤⼊⼝
(1)npm install zrender，因为zrender不是浏览器⾃带不同于前⾯的canvas与svg，需要先下载
(2)在header中引⼊
<script src="./node_modules/zrender/dist/zrender.js"></script>
三、案例上代码
看注释看注释看注释
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/zrender/dist/zrender.js"></script>
</head>
<body>
<div id="container" ></div>
<script>
//初始化dom对象
const zrder = zrender.ElementById('container'));
//开始绘制
//绘制矩形
//实例化矩形对象
const rect =new zrender.Rect({
shape:{
x:0,
y:0,
height:50,
width:50
},
style:{
fill:'yellow',
lineWidth:2
}
})
//添加矩形对象到zrder上⾯
zrder.add(rect)
/
/绘制线段
const line =new zrender.Polyline({
shape:{
shape:{
points:[
[80,80],
[190,120],
[300,200]
]
},
style:{
stroke:'red',
lineWidth:2,
}
})
zrder.add(line)
//更改属性，先创建⼀个矩形
const rect2 =new zrender.Rect({            shape:{
x:60,
y:100,
height:50,
width:50
},
style:{
fill:'blue',
lineWidth:2
}
})
zrder.add(rect2)
//修改颜⾊从蓝⾊变为绿⾊
rect2.attr('style',{
fill:'green'
});
/
/绘制圆形
var circle =new zrender.Circle({
shape:{
cx:150,
cy:50,
r:40
},
style:{
fill:'none',
stroke:'#F00'
svg图形}
});
zrder.add(circle);
//绘制⼼
var heart =new zrender.Heart({
shape:{
cx:350,
cy:200,
width:40,
height:50,
},
style:{
fill:'red',
stroke:'#F00'
}
});
zrder.add(heart);
//绘制⽔滴
var droplet =new zrender.Droplet({            shape:{
cx:150,
cy:250,
width:10,
height:30,
},
style:{
fill:'none',
stroke:'brown'
}
});
zrder.add(droplet);
</script>
</body>
</html>
四、结果展⽰
五、学习推荐

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。