问题: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);
}