作者：心叶
工夫：2020-09-01 00:13

咱们演示如何绘制了圆弧。

因为位图的画布是基于Canvas，而矢图基于SVG，因而咱们须要先假如页面有一个SVG标签。

获取画笔

var painter=$$('svg').attr({ "width":300, "height":300 }).painter();

能够看到，除了传递的结点变成了SVG外没有区别，咱们同样设置了画布大小。

配置画笔

painter.config({ 'strokeStyle':'red', 'lineWidth':3, 'lineDash':[5] });

绘制简略图形

画笔获取并配置好了当前，同样的，咱们间接调用画笔上的办法试试：

painter.strokeArc(150, 150, 100, 130, Math.PI/2, Math.PI/2*3);

很惋惜，报错了（关上浏览器控制台查看）：

Uncaught Error: Need a <path> ! 
    at t (image2d:17) at Object.t \[as strokeArc\] (image2d:17) 
    at example\-2.html:40

通过打印的谬误提醒能够看到，咱们不足一个path结点，为什么会这样，不是曾经有画布了吗？

SVG和Canvas画布的区别

因为Canvas是位图，绘制相似在一块画布上不停的涂鸦，而SVG有点相似一般的HTML类型标签（比方输入框是input），SVG绘制的各种图形其实也须要对应页面中一个SVG类型标签，下面就是对应一个path标签。

因而，咱们把最初一行绘制的办法略微革新一下（上面波及的bind和appendTo办法请查看矢图画笔一节中的阐明）：

painter
    .bind('<path>') 
    .appendTo() 
    .strokeArc(150, 150, 100, 130, Math.PI/2, Math.PI/2\*3);

再次运行，一个圆弧就绘制好了，能够点击此处查看运行成果。

数据绑定

接下来咱们要演示如何应用SVG画布疾速的绘图，相干的API请点击此处查阅。

如何疾速绘制柱状图

假如当初咱们有一堆数据：

// 筹备好数据 
var datas =[220,182,191,234,290,330,310,123,442,321,90,149,210,122,133,334,198,123,125,220\];

通过后面咱们曾经晓得了，因为柱状图其实就是一个个小矩形（也就是rect），因而咱们首先须要让页面中rect的个数和数组中元素的个数一样：

// 首先查找页面中的rect 
var imageObject = $$('rect'); 
// 而后把数据绑定到rect结点上，返回的是更新对象 
var update = imageObject.data(datas); 
// 因为页面中rect结点可能不够，有余的进行补充 
var enter = update.enter('<rect>').appendTo('svg');

这个时候你通过浏览器调试工具的Elements来查看rect结点个数，发现曾经和数据对应起来了。

// 所有筹备好了，进行绘制 
$$([imageObject, enter]).loop(function (data, index, target) { 
    // 绘制图像 
    // data是以后结点对象target保护的数据，index是以后结点对象序号 
    painter.bind(target).fillRect(index * 30 + 5, 500 - data, 20, data); 
});

至此，柱状图就绘制实现了，能够点击此处查看运行成果。

看到这里，你可能间接应用for循环等也能够很轻松的实现，可是，如果咱们的数据是随机生成的，而且每隔一段时间就扭转一下滴？接着看。

数据个数动静扭转如何绘制

比方咱们通过上面的办法随机生成datas，数据的个数和内容都随机扭转的：

// 先确定条目个数 
var num = (Math.random() * 30).toFixed(0) - -5; 
var datas = []; 
for (let i = 0; i < num; i++) { 
    datas.push(Math.random() * 500); 
}

每隔一段实现从新依据datas绘制，可是数据的个数不定，因而，当初的状况变了，rect除了有余须要补充外，也可能须要把多余的删除了，咱们把调整元素的那段代码革新一下：

// 首先查找页面中的rect 
var imageObject = $$('rect'); 

// 而后把数据绑定到rect结点上，返回的是更新对象 
var update = imageObject.data(datas); 

// 多余的删除 
update.exit().remove(); 

// 因为页面中rect结点可能不够，有余的进行补充 
var enter = update.enter('<rect>').appendTo('svg');

比照一下能够看进去，其实就是多了第三行代码（多余的删除）。余下绘制的办法和下面的简直一样，就不再赘述了。

你能够点击此处查看运行成果。怎么样，是不是挺简略的，数据绑定就是专门对齐结点和数据个数的一系列办法的汇合。