使用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像素的方式,可以保证设计稿上的坐标在不同浏览器中的相对位置一致,但需要注意的是,由于不同设备的像素密度不同,可能导致实际显示的圆点大小与设计稿上的大小有所差异。