zrender基础入门,简单的案例图形绘制
2020-06-29 04:48
459 查看
一、简单介绍
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" style="width:800px;height: 800px;"></div> <script> //初始化dom对象 const zrder = zrender.init(document.getElementById('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: { 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' } }); 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>
四、结果展示
五、学习推荐
相关文章推荐
- Golang 绘图基础 -绘制简单图形
- Java入门:绘制简单图形
- Apache Storm 编程入门基础(五):简单案例一
- canvas基础——绘制简单的图形
- matplotlib入门——绘制简单图形
- 零基础HTML5游戏制作教程 第2章 简单图形的绘制
- Android自定义控件绘制基本图形基础入门
- canvas基础与简单图形绘制(2)
- canvas基础与简单图形绘制(1)
- Mybatis简单入门 和基础知识点总结(有案例)
- Daydream VR入门基础教程,通过GVR示例SimpleVrPanorama制作VR全景图形应用
- GDI基础(1):绘制线条和图形
- flash 绘图API:绘制基础的图形
- Quart 2D 绘制图形简单总结(转)
- OpenGL入门学习——第三课 绘制几何图形的一些细节问题
- android基础知识之AIDL简单入门
- [Qt教程] 第11篇 2D绘图(一)绘制简单图形
- python基础入门之简单爬虫编写
- 机器学习入门案例简单理解
- PHP7.1+Sqlserver2012 入门查询 简单 案例