canvas图片平移

最新推荐文章于 2024-05-27 11:26:55 发布

仗剑弑天下

最新推荐文章于 2024-05-27 11:26:55 发布

阅读量598

点赞数

文章标签： javascript 前端 html

原文链接：https://blog.youkuaiyun.com/weixin_46441425/article/details/124277988

版权

本文介绍了一个使用HTML5 Canvas实现图像平移的示例。通过按钮控制图像在画布上进行上下左右的移动，每次平移距离为10像素。该示例展示了如何利用Canvas API进行基本图像处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Canvas图像的平移

<!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>

来源：https://blog.youkuaiyun.com/weixin_46441425/article/details/124277988