`
tntxia
  • 浏览: 1505382 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

zrender学习点滴

 
阅读更多

Zrender是一个二维绘图引擎,它提供了Canvas,SVG,VML等多种渲染方式,Zrender也是Echarts的渲染器。

 

Zrender在Github上的地址是https://github.com/ecomfe/zrender,也可以通过npm npm install zrender下载。

 

导入zrender, 

 

增加<script>: 

<script src="dist/zrender.js"></script>

 

 初始化zrender对象:

 

 

var main = document.getElementById('main');
// 初始化zrender
var zr = zrender.init(main);

 

 一个简单的例子,显示一个圆:

 

var zr = zrender.init(document.getElementById('main'));
    var circle = new zrender.Circle({
        shape: {
            cx: 150,
            cy: 300,
            r: 40
        },
        style: {
            fill: 'none',
            stroke: '#F00'
        }
    });
    zr.add(circle);

 

 我们还可以动态的改变圆的大小:

 


window.onload = function(){
   
    var zr = zrender.init(document.getElementById('main'));
    var circle = new zrender.Circle({
        shape: {
            cx: 150,
            cy: 300,
            r: 40
        },
        style: {
            fill: 'none',
            stroke: '#F00'
        }
    });
    zr.add(circle);

    document.getElementById("changeBtn").onclick = function(){
        circle.attr('shape',{
            r:parseFloat(document.getElementById("r_input").value)
        });
    }
}

 

 

 

0
0
分享到:
评论

相关推荐

    java点滴学习资料

    ### Java点滴学习资料 #### 一、Java简介与特点 Java是一种高级编程语言,由Sun Microsystems公司于1995年推出。Java的核心优势之一在于其跨平台特性,即所谓的“一次编写,到处运行”,这使得Java代码能够在不同...

    VC++ 学习点滴,自己学习VC的点滴理解

    在VC++的学习过程中,了解和掌握这些点滴知识是非常重要的,它们涵盖了从基本语法到MFC框架的使用,以及面向对象编程的原则。以下是对这些知识点的详细说明: 1. **组合框数据输入**:在VC++中,当你在组合框...

    国旗下演讲:学习点滴心得.pdf

    国旗下演讲:学习点滴心得.pdf

    SD卡协议学习点滴学习笔记

    ### SD卡协议学习知识点 #### 一、SD卡操作模式与状态 SD卡协议的核心概念之一就是**操作模式(operation mode)**及其对应的**状态(state)**。根据SD卡的标准规范,每种操作模式都关联着特定的状态,主机通过发送...

    SD卡协议学习点滴(完整版本)

    SD卡协议学习点滴(完整版本),对使用SD卡很有帮助

    自动点滴管理系统

    自动点滴管理系统是一款基于.NET 3.5框架,利用Windows Communication Foundation (WCF) 技术构建的应用程序。WCF是微软提供的一种全面的服务导向架构,用于构建高度互操作的、分布式系统。它允许应用程序在不同的...

    下载此文件-Oracle初学者的学习点滴及国内oracl.docx

    很抱歉,我无法根据您提供的文件内容来生成与"Oracle初学者的学习点滴及国内oracl.docx"相关的IT知识。文件的内容主要涉及国际贸易教程的习题和理论,如李嘉图的比较优势理论、里昂惕夫悖论,以及21世纪国际贸易的新...

    数据结构及算法学习点滴记录.zip

    这份名为“数据结构及算法学习点滴记录.zip”的压缩包文件显然包含了丰富的学习资源,旨在帮助大学生深入理解和掌握数据结构这一核心概念。 数据结构是计算机存储、组织数据的方式,它涉及到如何在计算机内存中有效...

    基于Wcf技术的自动点滴管理系统

    【基于Wcf技术的自动点滴管理系统】是一种利用先进的软件技术设计的医疗管理工具,主要用于提升医疗机构的点滴护理效率。此系统的核心是运用Windows Communication Foundation(Wcf),这是一种由微软提供的.NET框架...

    智能液体点滴速度监测

    标题中的“智能液体点滴速度监测”是指一种利用现代科技手段对输液过程中的点滴速度进行实时、精确监控的...这些知识对于医学工程、生物医学工程以及相关领域的学生和从业者来说,具有很高的学习价值和实践指导意义。

    液体点滴速度监控装置

    液体点滴速度监控装置 液体点滴速度监控装置是对液体点滴速度的检测和控制及储液瓶中液面高度的检测报警的系统。本系统通过光电传感器检测液面高度和液体点滴速度,使用步进电机控制液体点滴速度,并实现了多机通信...

    自动点滴管理系统.NET

    自动点滴管理系统是一款基于.NET 3.5框架,利用Windows Communication Foundation (WCF) 技术构建的高效能、高可靠性的应用。WCF是微软推出的一种面向服务的通信框架,旨在简化分布式系统的开发,它提供了丰富的功能...

    SD卡协议学习点滴(完整版本).pdf

    ### SD卡协议学习点滴知识点详解 #### 一、SD卡的操作模式与状态转换 SD卡在与控制器交互过程中,有着明确的操作模式与状态定义。这些模式与状态的切换是通过控制器向SD卡发送特定命令来实现的。了解这些概念对于...

    点滴\液体点滴速度监控装置设计报告

    【点滴液体点滴速度监控装置设计报告】 本设计报告主要探讨了一种基于单片机技术的液体点滴速度监控装置,旨在实现对输液过程的精确控制和实时监测,以提高医疗安全性和患者的舒适度。该系统的核心是单片机AT89C51...

    zhuji.rar_drip_液体点滴_点滴_点滴速度检测

    标题中的“zhuji.rar_drip_液体点滴_点滴_点滴速度检测”表明这是一个与医疗设备相关的项目,具体是关于液体点滴(输液)速度检测的。这个压缩包可能包含了用于控制或监测点滴速度的软件代码,其中"zhuji.asm"是一个...

    Nodejs学习点滴

    这篇名为“Nodejs学习点滴”的博文,结合了“源码”和“工具”两个标签,暗示了作者可能分享了关于Node.js核心原理以及相关开发工具的见解和经验。接下来,我们将深入探讨Node.js的核心特性,以及`build.js`、`Dom...

Global site tag (gtag.js) - Google Analytics