要通过canvas实现对图片沿x轴或者颜色y轴实现翻转，我们可以通过canvas2d的接口进行实现。
使用到的api：
使用getContext来获取canvas2d对象
使用 canvas2d对象的scale方法进行翻转
由于翻转的xy轴使用的是原点，也就是canvas的左上角的位置的轴，所以，我们还需要使用到translate方法，来移动将翻转后的图片移动到canvas的显示区域
逻辑说完了，那么上一下简短的翻转代码：
- 沿x轴翻转代码：
//垂直翻转
ctx.scale(1, -1);
ctx.translate(0, -canvas.height);
- 沿y轴翻转代码：
//水平翻转
ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0);
以上就是沿x轴和y轴翻转的代码，下面再奉上一个demo的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
var preName = './textures/build/admin_edit/1574131406/a1574212341_p0_';
var img = new Image();
img.src = preName+ 'x.jpg';
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.height = img.height;
canvas.width = img.width;
//水平翻转
ctx.scale(-1, 1);
ctx.translate(-img.width, 0);
//垂直翻转
ctx.scale(1, -1);
ctx.translate(0, -img.height);
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
canvas.style.cssText = 'position:fixed; left:0; top:0;';
document.body.appendChild(canvas);
}
</script>
</html>
