canvas中的元素位置及大小与浏览器适配

使用CSS像素适配，CSS像素是一种绝对单位，它在不同设备上有不同的转换比例。通过将设计稿的宽度和高度与CSS像素的比例关系计算出来，可以将设计稿上的坐标映射到Canvas中。
具体步骤如下：

1.获取浏览器窗口的宽度：

var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

2.计算设计稿上的坐标与CSS像素的比例关系：

var designWidth = 1920; // 设计稿的宽度 
var cssPixelRatio = browserWidth / designWidth; // CSS像素与设计稿像素的比例

3.以设计稿中的坐标(100, 100),半径10，为例，计算在Canvas中的实际位置：

var x = 100; // 圆点的x坐标 
var y = 100; // 圆点的y坐标 
var r = 10; //圆的半径
var xPos = x * cssPixelRatio; 
var yPos = y * cssPixelRatio; 
var rAdaption = r * cssPixelRatio;

4.在Canvas中绘制圆点：

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(xPos, yPos, rAdaption , 0, 2 * Math.PI); 
ctx.fillStyle = "black"; 
ctx.fill();

通过CSS像素的方式，可以保证设计稿上的坐标在不同浏览器中的相对位置一致，但需要注意的是，由于不同设备的像素密度不同，可能导致实际显示的圆点大小与设计稿上的大小有所差异。