canvas 使绘制的图片在div 居中显示，解决绘图模糊问题

最新推荐文章于 2025-12-22 11:28:58 发布

原创最新推荐文章于 2025-12-22 11:28:58 发布 · 6.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使canvas绘制的图片在div中居中显示，并解决了canvas绘图模糊的问题。通过将canvas视为未知图片处理实现居中，同时通过设置canvas的width和height属性为图片的两倍，然后调整css样式，确保清晰度。

一：绘图在div 居中显示：

首先把canvas当成未知的图片来处理，未知图片的居中显示如下：

二：绘图模糊

canvas作为画布，不能用css和style的方式设置宽高，他有自己特定的属性，width和height。不管当前的图片有多大，画布的宽高设置为图片的二倍，ctx.drawImge（）绘制图片后，在用canvas的css再次定义，使其的宽高和图片大小一直，就可以解决canvas绘制图片模糊的问题。

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test-pic{
            width:700px;
            height: 400px;
            margin: 20px auto;
            border: 1px solid #000;
        }
        .test-pic div{
            width:50%;
            height: 100%;
            float: left;
            background: #f3f3f3;
            position: relative;
        }
        .test-pic img {
            width: 80%;
            height: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .test-pic canvas {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="test-pic">
        <div id="test-pic-top" style="opacity: 1;">
            <img src="http://img1.3lian.com/img013/v2/38/d/41.jpg">
        </div>
        <div>
            <canvas id="myCanvas">

            </canvas>
        </div>
    </div>
    <script src="jquery-3.1.1.js"></script>   
    <script>
        var oImg = document.getElementsByTagName('img')[0];

        var cImg = new Image();
        cImg.onload = function() {
            var c = document.getElementById('myCanvas');
            var ctx = c.getContext('2d');

            // 设置画布的大小为图片大小的二倍
            c.width = $('img').width()*2;
            c.height = $('img').height()*2;

            // 绘制图片
            ctx.drawImage(oImg,0,0,c.width,c.height);

            // 用css控制画布大小
            c.style.width = $('img').width() + 'px';
            c.style.height = $('img').height() + 'px';
        }
        cImg.src = oImg.src;
    </script>
</body>
</html>