Canvas图像的平移

最新推荐文章于 2024-04-16 11:36:02 发布

稻田里展望者

最新推荐文章于 2024-04-16 11:36:02 发布

阅读量951

点赞数 1

分类专栏： Web前端技术文章标签： canvas html JavaScript

本文链接：https://blog.csdn.net/weixin_46441425/article/details/124277988

版权

Web前端技术专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移</title>
</head>
<body>
<input type="button" value="向左平移" id="MoveLeft">
<input type="button" value="向右平移" id="MoveRight">
<input type="button" value="向上平移" id="MoveUp">
<input type="button" value="向下平移" id="MoveDown">
<canvas id="canvas" width="1500" height="1050" style="border:1px solid green;"></canvas>
<script>

    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("2d");
    let image = new Image();
    image.src = "layer/_alllayers/L00/R00001b31/C00001219.png";

    //原坐标
    let originX = 0;
    let originY = 0;

    image.onload = function () {
        context.drawImage(image, originX, originY);
    }

    let distance = 10;
    //平移操作
    //向左平移
    let movebtnLeft = document.getElementById("MoveLeft");
    movebtnLeft.onclick = () => {
        originX = originX - distance;
        console.log(originX);
        dramImageByLeftDistance();
    };

    //向左平移方法
    function dramImageByLeftDistance() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(image, originX, originY);
    }

    //向右平移
    let movebtnRight = document.getElementById("MoveRight");
    movebtnRight.onclick = () => {
        originX = originX + distance;
        console.log(originX);
        dramImageByRightDistance();
    };

    //向右平移方法
    function dramImageByRightDistance() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(image, originX, originY);
    }

    //向上平移
    let movebtnUp = document.getElementById("MoveUp");
    movebtnUp.onclick = () => {
        originY = originY - distance;
        console.log(originY);
        dramImageByUpDistance();
    };

    //向上平移方法
    function dramImageByUpDistance() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(image, originX, originY );
    }

    //向下平移
    let movebtnDown = document.getElementById("MoveDown");
    movebtnDown.onclick = () => {
        originY = originY + distance;
        console.log(originY);
        dramImageByDownDistance();
    };

    //向下平移方法
    function dramImageByDownDistance() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(image, originX, originY );
    }

</script>
</body>
</html>