# 多倍屏下，使 datav 图表文字清晰

## 解决方法原理

假如在多倍屏下，画出来的 canvas 大小是 200x100 px，html 页面中设置大小为 100x50 px，那么在 retina 或者 4k 屏幕下，图表文字将更加清晰。在一倍屏下，放大 canvas 不能是图表更加清晰。

## 解决方案

假设 window.devicePixelRatio 为2，也就是屏幕为2倍屏
```
/**

* 在多倍屏下，使 canvas 图更加清楚

* @param { Object } dom 原生dom

* @returns null

*/
function makeChartClear (dom) {
	//  找到 canvas 元素
	let canvas = dom.querySelectorAll("canvas")[0]
	if(!canvas) return
	let ctx = canvas.getContext('2d')
	let dpr = window.devicePixelRatio
	let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect()
	// 内容放大
	canvas.width = dpr * cssWidth
	canvas.height = dpr * cssHeight
	// 画布放大
	ctx.scale(dpr, dpr)
}
``` 
注意css中设置 canvas dom 大小为原 canvas 的一半

```css
.father {
	width: 100px;
	height: 50px;
}
.father canvas {
	width: 100%;
	height: 100%;
}
```