canvas控制图片缩放

最新推荐文章于 2025-06-22 10:55:34 发布

原创最新推荐文章于 2025-06-22 10:55:34 发布 · 5k 阅读

0 ·

CC 4.0 BY-SA版权

canvas 专栏收录该内容

9 篇文章

订阅专栏

本文通过一个HTML示例展示了如何使用canvas元素结合JavaScript的drawImage方法，动态控制图片的缩放比例。当滑动范围输入条时，图片会根据所选比例进行缩放。示例中详细解释了drawImage函数的参数含义，并强调了该函数必须在图片加载完成后再调用。

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

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no, adress=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<canvas id="canvas" style="border:1px solid blue;">
   您的浏览器不支持canvas
</canvas></br>
<input type="range" id="slider" value="1" max="3" min="0.5" step="0.01" style="width:598px;" />
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    var slider = document.getElementById("slider");

    window.onload = function() {
        canvas.width = 598;
        canvas.height = 397;
        image.src = "picture_01.jpg";
        image.onload = function(){
            drawImageByScale();
            slider.onmousemove = function(){
                var scale = slider.value;
                drawImageByScale(scale);
            };
        }
    };

    function drawImageByScale(scale){
        var scale = scale || 1;
        var imageWidth = 598 * scale;
        var imageHeight = 397 * scale;
        var dx = (canvas.width - imageWidth)/2;
        var dy = (canvas.height - imageHeight)/2;
        context.clearRect(0,0,canvas.width,canvas.height);
        context.drawImage(image,dx,dy,imageWidth,imageHeight);
    }
</script>
</body>
</html>