关于canvas抗锯齿问题

有时候需要用canvas来绘制图表，发现设置线条大小为1,或者0.5时，画出来的线条不够细。

canvas有一个方法getBoundingClientRect()可获得一个rect的大小，有人说canvas.width和height的rect的一样，再平衡0.5单位。这个画出来的线还是不够细；w3cschool给出的解决方案是：

var w = 300; //css的大小

var h = 200;

var panel = $('#graph')[0]; //canvas的dom

var scale = window.devicePixelRatio;

panel .width  = w * scale; //canvas默认是宽300高150的大小
panel.height =  h * scale;

ctx.scale(scale, scale); //再来设置比例

ctx.lineWidth = 0.5; ctx.moveTo(50, 2);
ctx.lineTo(50, 200 - 2);
ctx.closePath();
ctx.stroke();

达成效果!

//--------------------------------------------

思路就是根据css给设置的大小，再通过window.devicePixelRatio换算出canvas的大小并设置，然后设置scale函数