设置后的宽高
开始画点
比如，375的设计图上，有一个半径为2px的圆点，点的位置是x:100,y:100。
那么我们现在canvas的宽度是750，宽高变成了之前的2倍。为了视觉上位置保持不变，我们画点的位置就应该是x:100*pixelRatio,y:100*pixelRatio。
完整代码如下：
<canvas id="map" style="width: 375px;height:330px;"></canvas><script>
let canvas = document.querySelector('#map');
// 获取到屏幕倒是是几倍屏。
let getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
// iphone6下得到是2
const pixelRatio = getPixelRatio(canvas);
// 设置canvas的真实宽高
canvas.width = pixelRatio * canvas.offsetWidth; // 想当于 2 * 375 = 750
canvas.height = pixelRatio * canvas.offsetHeight;
// 开始画点
let ctx = canvas.getContext("2d");
ctx.beginPath();
// 375设计图上的位置和尺寸都应该*pixelRatio 因为我们现在的canvas是750
ctx.arc(100*pixelRatio, 100*pixelRatio, 2*pixelRatio, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();
// ...你的其他代码
</script>
