Question

我正在尝试简单地创建一个画布，该画布的网格尺寸为20 x 20像素。画布嵌套在带有滚动条的div中。

我已经从here

获得了用于画布的点网格功能

$(function () {


        function getDocumentWidth() {
            return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        };

        function getDocumentHeight() {
            return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
        };

        var canvas = document.getElementById('can1');
        var context = canvas.getContext('2d');

        var vw = getDocumentWidth(),
            vh = getDocumentHeight();

        // resize the canvas to fill browser window dynamically
        window.addEventListener('resize', onResize, false);
        function onResize() {
            vw = getDocumentWidth();
            vh = getDocumentHeight();
            resizeCanvas();
        }

        function resizeCanvas() {
            canvas.width = vw;
            canvas.height = vh;
            drawDots();
        }
        resizeCanvas();


        // grid
        function drawGrid() {
            var cellW = 20,
                cellH = 20;

            // vertical lines
            for (var x = 0; x <= vw; x += cellW) {
                context.moveTo(x, 0); // x, y
                context.lineTo(x, vh);
            }

            // horizontal lines
            for (var y = 0; y <= vh; y += cellH) {
                context.moveTo(0, y); // x, y
                context.lineTo(vw, y);
            }

            context.strokeStyle = "#cccccc";
            context.stroke();
        }
        // drawGrid();

        // dots
        function drawDots() {
            var r = 1,
                cw = 20,
                ch = 20;

            for (var x = 20; x < vw; x += cw) {
                for (var y = 20; y < vh; y += ch) {
                    context.fillStyle = '#000000';
                    context.fillRect(x - r / 2, y - r / 2, r, r);
                }
            }
        }
        drawDots();


    })

这是将画布放置在html中的方式：

<div class="forCanvas" >
        <canvas id="can1" class="dropZone ui-widget-header" width=581 height=821 >
        </canvas>
</div>

和所有CSS：

.dropZone {
   width: 581px;
   height: 821px;
   padding: 0;
   margin: 0;
   background: #fff;
}

.forCanvas {
   height: 600px;
   width: 680px;
   overflow: hidden;
   overflow-y: scroll;
   overflow-x: auto;
   padding: 20px;
   background: white;
   border: 1px solid #d9d9d9;
   border-radius: 5px;
}

问题在于这些单元格的大小不是20 x 20，并且在更改浏览器尺寸时会调整图形大小。

据我了解，视口宽度和高度与实际宽度和高度之间存在问题吗？因此，我尝试将宽度和高度设置为：（如上所示）

<canvas id="can1" class="dropZone ui-widget-header" width=581 height=821 >

我以前使用此功能存在相同的问题：

function drawGrid() {
    var cellW = 20,
        cellH = 20;

    // vertical lines
    for (var x = 0; x <= vw; x += cellW) {
        context.moveTo(x, 0); // x, y
        context.lineTo(x, vh);
    }

    // horizontal lines
    for (var y = 0; y <= vh; y += cellH) {
        context.moveTo(0, y); // x, y
        context.lineTo(vw, y);
    }

    context.strokeStyle = "#cccccc";
    context.stroke();
}

这里还有一些图片可以显示您的外观：

调整大小之前

调整大小后

任何帮助或解释将不胜感激。 谢谢！

编辑

下面是测试该问题的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
    .dropZone {
        width: 581px;
        height: 821px;
        padding: 0;
        margin: 0;
        background: #fff;
    }

</style>




</head>
<body>
    <canvas id="can1" class="dropZone ui-widget-header" width=581 height=821 >
    </canvas>
    <script>
        function getDocumentWidth() {
            return Math.min(document.documentElement.clientWidth, window.innerWidth || 0);
        };

        function getDocumentHeight() {
            return Math.min(document.documentElement.clientHeight, window.innerHeight || 0)
        };

        var canvas = document.getElementById('can1');
        var context = canvas.getContext('2d');

        window.addEventListener('resize', resizeCanvas, false);
        function resizeCanvas() {
            canvas.width = getDocumentWidth();
            canvas.height = getDocumentHeight();
            drawDots();
        }

        function drawDots() {
            var r = 1;

            for (var x = 20; x < canvas.width; x += 20) {
                for (var y = 20; y < canvas.height; y += 20) {
                    context.fillRect(x - r / 2, y - r / 2, r, r);
                }
            }
        }

        resizeCanvas();
    </script>
</body>


</html>

Answer 1

为解决这个问题，我在div内添加了具有所需尺寸的画布。（问题是由于在画布上设置尺寸引起的。）

因此：

<div  id="can2" class="dropZone ui-widget-header">
            <canvas id="can1"></canvas>
</div>

在画布上绘制的Html调整大小

1 个答案: