搜索都没有比较好的解决方法,还是gayhub(雾)来的快。
在此感谢 Canvas@yangCarlos 开源的此项目
为修复问题提供了非常有建树性的想法
Logic
其主要想法是将 CanvasRenderingContext2D 进行2倍放大,以达到目的。
Usage
let canvas = document.createElement('canvas');
let img = new Image();
img.src = '07.jpg';
img.width = 375;
img.height = 225;
let imgWidth = img.width;
let imgHeight = img.height;
//将canvas宽设置为图片的宽高
let scaleBy = 2;
//将canvas的容器放大两倍
canvas.width = imgWidth * scaleBy;
canvas.height = imgHeight * scaleBy;
canvas.style.width = imgWidth + 'px';
canvas.style.height = imgHeight + 'px';
context = canvas.getContext('2d');
//将canvas缩小一半,相当于图像扩大二倍
context.scale(scaleBy, scaleBy);
//将图片画到canvas中
img.onload = function () {
context.drawImage(img, 0, 0, img.width, img.height);
}
Features or Bug?
此方法的确有明显的画质提升。但是!但是!在事件上获取的X,Y坐标同样会也会等比缩放的!
举个栗子:
var touchCar = function (e) {
e.preventDefault();
var touch = e.targetTouches[0];
var x = touch.pageX;
var y = touch.pageY;
// 要对此处的x和y进行乘二处理
player.move(x * 2, y * 2);
}
canvasEl.addEventListener('touchmove', touchCar, false);