解决canvas绘图失真的问题

搜索都没有比较好的解决方法，还是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);