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)
        });
    }
}