使用canvas实现对图片的翻转-CFANZ编程社区

使用canvas实现对图片的翻转

要通过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>

0 条评论