JavaScript Canvas实现高清绘制效果

//修改前
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "orange";
ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.stroke();
ctx.closePath();

//修改后
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 获取缩放倍率
const getPixelRatio = (context) => {
return window.devicePixelRatio || 1;
};
const ratio = getPixelRatio();
// 保存原来的宽高
const oldWidth = canvas.width;
const oldHeight = canvas.height;
// canvas画布进行放大
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
// 在css里将宽高设置为原来的大小
canvas.style.width = oldWidth + "px";
canvas.style.height = oldHeight + "px";
// 考虑到内容的缩放，将ctx缩放
ctx.scale(ratio, ratio);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "orange";
ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.stroke();
ctx.closePath();