使用canvas实现对图片的翻转
2503次阅读
198人点赞
发布时间: 2023-12-06 11:11:13
扫码到手机查看
![]()
实现方法
要通过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);综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
var preName = './wubin-work/';
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>在线案例效果链接：http://code.wubin.work/code/js/canvas-fanzhuan/
目录