canvas中图片大小自适应

最新推荐文章于 2024-07-29 11:53:27 发布

wzq2011

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量7.9k

点赞数 9

文章标签： javascript html5 canvas

本文链接：https://blog.csdn.net/wzq2011/article/details/110220251

版权

canvas中图片自适应

图片在canvas中自适应大小并居中。
通常图片大小与canvas的大小是不同的，分为以下几种情况

图片高或宽，超过canvas高或宽
图片高、宽，都超过canvas高宽；
图片高、宽都小于canvas高、宽

问题的本质其实是动态计算图片大小，并在canvas适合的位置画出图片

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas中图片大小自适应</title>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<style>
    #canvas {
        box-shadow: 0 0 2px black;
    }
</style>
<script>
    window.onload = () => {
        var canvas = document.getElementById("canvas");
        var w = canvas.width;
        var h = canvas.height;
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            var img = new Image()
            img.src = 'https://gtms02.alicdn.com/tps/i2/TB1ZeJGIXXXXXcnXXXXDgwcQVXX-375-130.jpg' // 图片地址示例
            img.onload = function () {
                var iw = this.width;
                var ih = this.height;
                var local = calculate(iw, ih)
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.drawImage(this, local.px, local.py, local.pw, local.ph)
            }
        }

        // 计算出图片画在canvas中的四个参数
        function calculate(pw, ph) {
            var px = 0;
            var py = 0;
            if(pw < w && ph < h){
                px = 0.5 * w - 0.5 * pw;
                py = 0.5 * h - 0.5 * ph;
            }else if (ph / pw > h / w) {
                var uu = ph;
                ph = h
                pw = pw * h / uu
                px = 0.5 * w - 0.5 * pw;
            } else {
                var uu = pw;
                pw = w;
                ph = ph * pw / uu
                py = 0.5 * h - 0.5 * ph;
            }
            return {px, py, pw, ph}
        }
    }
</script>
</body>
</html>

注意将示例中图片的src替换成自己的图片地址

wzq2011

关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
canvas中图片大小自适应

canvas中图片自适应图片在canvas中自适应大小并居中。通常图片大小与canvas的大小是不同的，分为以下几种情况图片高或宽，超过canvas高或宽图片高、宽，都超过canvas高宽；图片高、宽都小于canvas高、宽问题的本质其实是动态计算图片大小，并在canvas适合的位置画出图片直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫