canvas绘制清晰的方法

很早就开始使用canvas，包括自己绘制各种图形，以及作为画布提供给诸如echarts，当canvas绘制细线条，特别是关于文字绘制会出现很模糊或者锯齿的感觉。

 <canvas ref="canvas" width="200" height="200"/>

正常情况下一般都是这么写的，但是实际上对于canvas来说，这个canvas.width canvas.height 与canvas.style.width canvas.style.height不一样。

在标签中作为props输入的高和宽指的是画布大小，而css给#canvas指定的高宽则是实际尺寸，所以我们就可以放大画布，然后让实际尺寸小于画布尺寸即可，这样相当于图片缩小，清晰度会相应的提高

<canvas ref="canvas" style={{width:200,height:200}} width="400" height="400"/>

比如这样，就相当于先绘制了一个400*400的画布，然后缩放到200*200的空间上，但是同时绘制的所有坐标需要根据缩放的比例进行相对应的计算,包括文字输入的字体大小

效果如下图所示，

根据代码一得到的结果不够清晰，而代码二的结果和HTML文字输入相差无几

ps:圆环百分比绘制代码

         let canvas = this.refs.canvas;
         let context = canvas.getContext('2d');
         let centerX = canvas.width/2;
         let centerY = canvas.height/2;
         let rad = Math.PI*2/100;
         let endNum = this.props.param[1] * 100;
         let scale = 2;
         //context.mozImageSmoothingEnabled = true;
         //context.webkitImageSmoothingEnabled = true;
         //context.msImageSmoothingEnabled = true;
         context.imageSmoothingEnabled = true;
         //context.webkitFontSmoothing = true;
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.save();
         context.strokeStyle = "#53FFFF"; //设置描边样式
         context.lineWidth = 4*scale; //设置线宽
         context.beginPath(); //路径开始
         context.arc(centerX, centerY, 75*scale , -Math.PI/2, -Math.PI/2 +endNum*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
         context.stroke(); //绘制
         context.closePath(); //路径结束
         context.restore();
         context.save();
         context.beginPath();
         context.strokeStyle = "white";
         context.lineWidth = 2*scale;
         context.arc(centerX, centerY, 75*scale , 0, Math.PI*2, false);
         context.stroke();
         context.closePath();
         context.restore();
         context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
         context.strokeStyle = "#fff"; //设置描边样式
         //绘制字体，并且指定位置
         context.fillStyle = "#fff";
         context.font = "normal normal lighter 24px Microsoft YaHei"; //设置字体大小和字体
         context.fillText("击败了全部用户", centerX-40*scale, centerY-20*scale);
         context.font = "normal normal normal 60px arial";
         context.fillText(endNum.toFixed(0)+"%", centerX-23*scale, centerY+15*scale);
         context.font = "normal normal lighter 28px Microsoft YaHei"; //设置字体大小和字体
         context.fillText(this.props.judge+'', centerX-15*scale, centerY+40*scale);
         context.stroke(); //执行绘制
         context.restore();