/*折线图组件对象*/

var H5ComponentPolyline = function( name, cfg) {

var component = new H5ComponentBase( name, cfg );

//绘制网格线 - 背景层

var w = cfg.width;

var h = cfg.height;

var cns = document.createElement('canvas');

var ctx = cns.getContext('2d');

cns.width = ctx.width = w;

cns.height = ctx.height = h;

component.append( cns );

var draw = function( per) {

ctx.clearRect(0,0,w,h);

var step = 10;

ctx.beginPath(); 

ctx.lineWidth = 1;

ctx.strokeStyle = "#333333";

window.ctx = ctx;

for( var i = 0; i<step+1; i++) {

var y = (h/step) * i;

ctx.moveTo(0, y);

ctx.lineTo(w,y);

}

// 垂直网格线 ( 根据项目个数去分 )

step = cfg.data.length+1;

var test_w = w/step;

for( var i = 0; i<step+1; i++) {

var x = (w/step) * i;

ctx.moveTo(x,0);

ctx.lineTo(x,h);

if( cfg.data[i] ){

var text = $('<div class="text">');

text.text(cfg.data[i][0]);

text.css('width',test_w/2).css('left',x/2 - test_w/4 + test_w/2);

component.append(text);

}

}

ctx.stroke();

//加入画布 - 数据层

var cns = document.createElement('canvas');

var ctx = cns.getContext('2d');

cns.width = ctx.width = w;

cns.height = ctx.height = h;

component.append( cns );

ctx.clearRect(0,0,w,h);

//绘制折线数据

ctx.beginPath();

ctx.lineWidth = 3;

ctx.strokeStyle = "#ff8878";

var x = 0;

var y = 0;

// ctx.moveTo(10, 10);

// ctx.arc(10,10,5,0,2*Math.PI);

//画点

var row_w = w/(cfg.data.length+1);

$.each(cfg.data,function( idx, item ) {

x = row_w*(idx+1);

y = h*(1-item[1]*per);

ctx.moveTo(x, y);

ctx.arc(x,y,5,0,2*Math.PI);

});

//连线

ctx.moveTo( row_w , h*(1-cfg.data[0][1]*per) );

$.each(cfg.data,function( idx, item ) {

x = row_w*(idx+1);

y = h*(1-item[1]*per);

ctx.lineTo(x, y);

});

ctx.stroke();

//绘制阴影

ctx.lineWidth = 1;

ctx.strokeStyle = 'rgba(255, 136, 120, 0)';

ctx.lineTo(x,h);

ctx.lineTo(row_w,h);

ctx.fillStyle = 'rgba(255, 136, 120, 0.2)';

ctx.fill();

//写数据

$.each(cfg.data,function( idx, item ) {

x = row_w*(idx+1);

y = h*(1-item[1]*per);

ctx.fillStyle = item[2] ? item[2] : '#595959';

ctx.fillText( ((item[1]*100)>>0)+'%' ,x-10 ,y-10);

});

ctx.stroke();

}

// draw(0.5, ctx);

component.on('onLoad',function(){

//折线生长动画

var s = 0;

for(var i=0;i<100;i++){

setTimeout(function(){

s+=0.01;

draw(s);

},i*10)

}

});

return component;

}

在调用draw(s)方法的时候调试发现ctx是undefined;如果用显示传入参数来调用draw(s,ctx)画布不会清空。