canvas设置像素与画布样式宽高不符的原因及解决办法

canvas设置像素与画布样式宽高不符的原因及解决办法

背景

canvas绘制元素的时候，其单位通常都是以像素来统计的，且其设置的像素，是真实屏幕上的像素点数量，而我们通过css设置的像素并不是真实屏幕的像素点数量，其与dpr有关，所以有可能会出现以下情况：即通过css设置画布宽高，之后再在canvas中绘制元素的时候设置与画布相同宽高的像素，元素并不能占满画布，甚至对于尺寸的预估还差了一大截。为了解决这一问题，我们需要获取canvas画布中真实宽高的像素点数量，才能更好的设置元素的宽高

解决办法

如下：通过id获取canvas画布的dom，即myCanvas，再通过myCanvas.width和myCanvas.height，即可知道canvas画布中宽和高所占据的屏幕准确的像素点，之后再依据像素点的多少，即可准确绘制符合尺寸的元素

let myCanvas: any = document.getElementById('myCanvas');
let ctx = myCanvas.getContext("2d");
const myCanvasWidth = myCanvas.width; // canvas画布中能准确设置像素的宽度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）
const myCanvasHeight = myCanvas.height; // canvas画布中能准确设置像素的高度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）
console.log(myCanvasWidth, myCanvasHeight);
const borderWidth = 10;
// 先绘制画布原始边框矩形
ctx.lineWidth=borderWidth; // 设置边框的线条宽度为8个像素
ctx.strokeStyle="#333"; // 设置线条颜色
ctx.rect(5, 5, myCanvasWidth-borderWidth, myCanvasHeight-borderWidth); // 设置边框所在坐标，是因为线条宽度也占据了像素，所以坐标x,y设置为线条宽度的一半，且矩形宽高需要减去线条宽度，这样才能让矩形沿着画布边缘，铺满画布
ctx.stroke();