zrender learning bit by bit

Zrender is a two-dimensional drawing engine, which provides multiple rendering methods such as Canvas, SVG, VML, etc. Zrender is also the renderer of Echarts.

 

The address of Zrender on Github is https://github.com/ecomfe/zrender , and it can also be downloaded via npm  npm install zrender .

 

import zrender, 

 

Add <script>: 

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

 

 Initialize the zrender object:

 

 

var main = document.getElementById('main');
// initialize zrender
var zr = zrender.init(main);

 

 A simple example showing a circle:

 

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

 

 We can also dynamically change the size of the 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)
        });
    }
}