标签：
很早就开始使用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();
标签：
原文地址：http://www.cnblogs.com/fireyjy/p/5789376.html
