1、下载插件
npm i hidpi-canvas
2、直接梭
let canvas = this.$refs.luckydraw; //canvas的dom
const ctx = ctxDom.getContext("2d");
/*
*window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,
即公式表示为:window.devicePixelRatio = 物理像素 / dips。
*物理像素(physical pixel):设备能控制显示的最小单位
*设备独立像素(device-independent pixel):独立于设备的用于逻辑上衡量像素的单位
*每英寸像素量(pixels per inch):一英寸长度上可以并排的像素数量
*/
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
var ratio = devicePixelRatio / backingStoreRatio; //设备像素比
/*
*将 canvas 的高和宽分别乘以 ratio 将其放大,
*然后再用 css 将其样式高和宽限制成初始的大小。
*/
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
ctx.scale(ratio, ratio);
ctx.translate(0.5, 0.5);
下面这个就是处理过后的canvas,懂的都懂
<canvas data-v-20f1cd57="" width="738" height="738" class="luckydraw" style="width: 246px; height: 246px;"></canvas>