有时候需要用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函数