我正在尝试简单地创建一个 Canvas ，其中有一个单元格大小为 20 x 20 像素的网格。 Canvas 嵌套在带有滚动条的 div 中。
我从 here 获得了 Canvas 的点网格函数
$(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();
})
下面是 Canvas 在 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，并且在更改浏览器尺寸时绘图会调整大小。
据我了解，视口(viewport)宽度和高度与实际宽度和高度之间存在问题吗？所以我尝试这样设置宽度和高度:(也见上文)
<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>
最佳答案
为了解决这个问题，我在一个 div 中添加了我想要的尺寸的 Canvas 。 (问题是由为 Canvas 设置尺寸引起的)。
因此:
<div id="can2" class="dropZone ui-widget-header">
<canvas id="can1"></canvas>
</div>
关于javascript - Canvas 上的 Html 绘图被调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51533538/