html语言制作折线图,HTML5 canvas绘制折线图(仿echarts)

问题：Retina屏上字体线条模糊问题

解决方案：放大canvas的大小，然后用css压缩回原大小，例如：想要900*400的画布，先将画布设置为 width="1800px" height="800px"，再用css {width: 900px;height: 400px;}压缩。

canvas代码：

echarts绘制

var scale = 2;

var canvas = document.getElementById('canvas');

var config = {

width: canvas.width,

height: canvas.height,

Left: 70,

Top: 90,

Right: 30,

Bottom: 60,

color: ["#5266d7"],

yLine:{

splitcount: 8,

data:[0,100,200,300,400,500,600,700,800]

},

xLine:{

splitcount: 9,

data:[1,2,3,4,5,6,7,8,9,10]

},

series:{

data:[0, 532, 555, 700, 500, 800, 300, 270, 358, 160, 453, 577, 639, 758, 233, 299, 120, 188, 158, 176, 333, 257, 120, 199, 573, 430, 111, 300, 700, 80, 50, 30, 40, 10, 22, 37, 77, 100, 240, 183, 143, 377, 133, 445, 345, 321, 111,12,3,34,456,235,214,43,21]

}

}

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

// 绘制title

drawText('单位: 次', config.Left, config.Top - 30, 'normal 22px Arial', '#a3a2a7');

// 绘制网格线

darwBackLine('#cccccc', config.yLine.splitcount, 1, config.yLine.data);

// 绘制x轴

drawXLine('#939099', config.xLine.splitcount, 2, config.xLine.data);

// 绘制线条

drawLines(config.color[0], 2,config.series.data);

// 绘制图例

drawItem('test', config.color[0], 2);

function darwBackLine(color, splitcount, linewidth, data) {

var len = Math.floor((config.height - config.Top - config.Bottom)/splitcount);

var start = config.Top;

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

var point = start+len*i;

drawLine(config.Left, point, (config.width/2 - config.Right)*scale, point, color, linewidth);

drawText(data[splitcount-i], 10, point, 'normal 22px Arial', '#605d68');

}

drawText(data[splitcount-i], 10, point+len, 'normal 22px Arial', '#605d68');

}

function drawXLine(color, splitcount, linewidth, data) {

var left = config.Left;

var top = config.height - config.Bottom;

var right = (config.width/2 - config.Right)*scale;

drawLine(config.Left, top, right, top, color, linewidth);

var len = (right - left)/splitcount;

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

var xpoint = left+len*i;

drawLine(xpoint,top+linewidth,xpoint, top-5*scale, color, linewidth);

var PanningLeft = data[i].toString().length*5;

drawText(data[i], xpoint-PanningLeft, top+15*scale, 'normal 22px Arial', '#605d68')

}

}

function drawLines(color, linewidth, data) {

var count = data.length;

var left = config.Left;

var top = config.height - config.Bottom;

var right = (config.width/2 - config.Right)*scale;

var len = (right - left)/(count - 1);

var i = 0;

var interval = setInterval(function() {

if(i >= count - 1){

clearInterval(interval);

return;

}

drawLine(left+len*i, top-(data[i]/800)*(top - config.Top), left+len*(i+1), top-(data[i+1]/800)*(top - config.Top), color, linewidth, 'bevel');

i++;

}, 30);

}

function drawItem(text, color, linewidth) {

var right = (config.width/2 - config.Right)*scale;

var left = right-(text.length*10);

drawText(text, left, config.Top - 10, 'normal 22px Arial', '#605d68');

drawLine(left-20, config.Top - 15, left-80, config.Top - 15, color, linewidth);

}

function drawLine(startX, startY, endX, endY, color, width, lineJoin) {

ctx.beginPath();

ctx.moveTo(startX, startY);

ctx.lineTo(endX, endY);

if(color){

ctx.strokeStyle = color

}

if(width){

ctx.lineWidth = width*scale;

}

if(lineJoin){

ctx.lineJoin = lineJoin;

}

ctx.closePath();

ctx.stroke();

}

function drawText(text, x, y, font, color) {

ctx.font= font;

ctx.fillStyle= color;

ctx.fillText(text, x, y);

}