跳到主要内容

canvas 在移动端显示模糊问题

设置好像素比例

var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio =
  context.webkitBackingStorePixelRatio ||
  context.mozBackingStorePixelRatio ||
  context.msBackingStorePixelRatio ||
  context.oBackingStorePixelRatio ||
  context.backingStorePixelRatio ||
  1;
var ratio = devicePixelRatio / backingStoreRatio;

var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + "px";
canvas.style.height = oldHeight + "px";
context.scale(ratio, ratio);

//进行正常的操作
context.drawImage();

参考​