canvas绘制清晰的方法

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

1 <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:圆环百分比绘制代码

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