背景
canvas绘制元素的时候，其单位通常都是以像素来统计的，且其设置的像素，是真实屏幕上的像素点数量，而我们通过css设置的像素并不是真实屏幕的像素点数量，其与dpr有关，所以有可能会出现以下情况：即通过css设置画布宽高，之后再在canvas中绘制元素的时候设置与画布相同宽高的像素，元素并不能占满画布，甚至对于尺寸的预估还差了一大截。为了解决这一问题，我们需要获取canvas画布中真实宽高的像素点数量，才能更好的设置元素的宽高
解决办法
如下：通过id获取canvas画布的dom，即myCanvas，再通过myCanvas.width和myCanvas.height，即可知道canvas画布中宽和高所占据的屏幕准确的像素点，之后再依据像素点的多少，即可准确绘制符合尺寸的元素
letmyCanvas: any=document.getElementById('myCanvas'); letctx=myCanvas.getContext("2d"); constmyCanvasWidth=myCanvas.width; // canvas画布中能准确设置像素的宽度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）constmyCanvasHeight=myCanvas.height; // canvas画布中能准确设置像素的高度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）console.log(myCanvasWidth, myCanvasHeight); constborderWidth=10; // 先绘制画布原始边框矩形ctx.lineWidth=borderWidth; // 设置边框的线条宽度为8个像素ctx.strokeStyle="#333"; // 设置线条颜色ctx.rect(5, 5, myCanvasWidth-borderWidth, myCanvasHeight-borderWidth); // 设置边框所在坐标，是因为线条宽度也占据了像素，所以坐标x,y设置为线条宽度的一半，且矩形宽高需要减去线条宽度，这样才能让矩形沿着画布边缘，铺满画布ctx.stroke();
