Canvas图像的放大缩小

最新推荐文章于 2024-03-29 17:03:34 发布

稻田里展望者

最新推荐文章于 2024-03-29 17:03:34 发布

阅读量5k

点赞数 2

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

原文链接：https://juejin.cn/post/6868824502529163271

版权

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

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大</title>
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>

</head>
<body>
<input type="button" value="放大" id="Bigger"><br>
<input type="button" value="缩小" id="Smaller"><br>
<canvas id="canvas" height="1050" width="1500"></canvas>

<script>
    let add = document.getElementById("Bigger");
    let release = document.getElementById("Smaller");
    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("2d");
    let initScale = 1; //缩放倍数 1为默认值
    let image = new Image();
    var isMouseDown = false; //是否处于拖动状态
    window.onload = () => {
        _initCanvasImg();
        image.onload = () => {
            dramImageByScale(1);
        };
    };
        //页面加载成功初始化
    function _initCanvasImg() {
        // 拿到图片地址
       image.src="layer/_alllayers/L00/R00001b30/C00001219.png";

    }

    function dramImageByScale(scale) {
        let imgWidth = image.width;
        let imgHeight = image.height;
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        var width = imgWidth * scale;
        var height = imgHeight * scale;
        var sx = canvas.width / 2 - width / 2; //x坐标
        var sy = canvas.height / 2 - height / 2; //y坐标
        context.clearRect(0, 0, canvas.width, canvas.height);
        //drawImage 方法在画布上绘制图像、画布或视频。
        //绘制的内容、坐标 被剪切的宽高
        context.drawImage(image, sx, sy, width, height);
        console.log(sx);
        console.log(sy);
    }

    add.onclick = () => {
        initScale += 0.1;
        console.log(initScale);
        dramImageByScale(initScale);
    };
    release.onclick = () => {
        initScale -= 0.1;
        console.log(initScale);
        dramImageByScale(initScale);
    };
</script>
</body>
</html>