一、简单介绍

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>

四、结果展示

五、学习推荐

官方网址

zrender基础入门，简单的案例图形绘制相关推荐

matlab画图入门篇--各种基本图形绘制的函数与实例【转载】
MATLAB画图入门篇--各种基本图形绘制的函数与实例一．二维图形(Two dimensional plotting) 1. 基本绘图函数(Basic plotting function):Plo ...
kuka机器人焊接编程入门教程_套装官方正版 KUKA工业机器人从入门到精通共3册库卡基础入门与应用案例精析编程高级教程编程与实操技巧...
<KUKA工业机器人基础入门与应用案例精析> 本书基于作者多年与KUKA机器人相关的从业经验来编写,全书共7章,主要围绕KUKA机器人的机械.电气.操作.配置软件.编程软件以及应用等方面展 ...
Linux基础入门,简单讲解
Linux基础入门,简单讲解涵盖内容:计算机组成与Linux操作系统概论任务要求:大概了解计算机的主要组成部件,明白计算机磁盘分区方式,常用的计算单元换算以及LINUX是什么.有什么特点即可. 文 ...
零基础入门学习Python(33)-图形用户界面编程（GUI编程）EasyGui
用户界面编程,即平时说的GUI(Graphical User Interface)编程,那些带有按钮.文本.输入框的窗口的编程 EasyGui是一个非常简单的GUI模块,一旦导入EasyGui模块,P ...
SDL教程零基础入门简单操作 day1
1.0 SDL 简介文章目录 1.0 SDL 简介 1.1 什么是 SDL? 1.2 SDL 可以做什么? 2. 在VS上获取和安装 SDL 2.1 SDL2库下载 2.2 安装SDL2 2.3 在 ...
python3.6下载百度云_Python3.6零基础入门与爬虫案例开发教程
全网最热的Python3入门+进阶第1章 Python入门导学介绍Python的特性.优点.缺点.前景以及课程的内容.重点和特色. 第2章 Python环境安装一键安装Python的编译环境,写 ...
Python程序设计语言基础02：Python基本图形绘制
目录 1. 不同编程语言的适用对象 2. 蟒蛇绘制实例 3. 库或类的引用 3.1 Python计算生态 3.2 库引入与import语法 3.2.1 引入库整体 3.2.2 引入库函数 4. tur ...
[网络安全自学篇] 七十二.逆向分析之OllyDbg动态调试工具（一）基础入门及TraceMe案例分析
这是作者网络安全自学教程系列,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友们学习,希望您们喜欢,一起进步.前文分享了外部威胁防护和勒索病毒对抗.这篇文章将讲解逆向分析OllyDbg动态调试 ...
Tableau 入门系列之各种图形绘制
文章目录 What 熟悉Tableau 绘制各种图形柱状图

zrender基础入门，简单的案例图形绘制

一、简单介绍

二、使用入口

三、案例上代码

四、结果展示

五、学习推荐

zrender基础入门，简单的案例图形绘制相关推荐

最新文章

热门文章