一、retina屏
视网膜显示屏（英语：Retina Display）是一种由苹果公司设计和委托制造的现实屏幕，具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏幕。
比如，初期Retina屏幕的分辨率为640×960（326ppi）
*dpi通常理解为打印分辨率，ppi通常为屏幕显示分辨率。大多数情况下dpi=ppi
*平常css单位：
pt和px的关系:
1pt=(ppi/72)px
二、window.devicePixelRatio
代表物理像素分辨率与CSS像素分辨率之比；
具体而言，当dpr=1设置1px在浏览器上会显示1px; 当dpr=2设置1px在浏览器上会显示2px; 当dpr=3设置1px在浏览器上会显示3px。
三、canvas的width和height与css中的宽高属性
1、canvas元素的宽高属性指的是canvas系统画布的大小
2、css中的宽高属性代表canvas显示盒子的大小。这个设置如果没有遵循画布比例，可能会导致显示畸形
四、实现canvas高清绘制
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');if (window.devicePixelRatio > 1) {var canvasWidth = canvas.width;var canvasHeight = canvas.height;canvas.width = canvasWidth * window.devicePixelRatio;canvas.height = canvasHeight * window.devicePixelRatio;canvas.style.width = canvasWidth + "px";canvas.style.height = canvasHeight + "px";ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
