这个绘图应用程序可以在我的笔记本电脑上完美运行。在不同的屏幕尺寸上进行测试,绘制的线条与光标不对齐。我认为我将不得不应用一些缩放机制。
// DRAWING FUNCTIONALITY
var canvas, ctx, painting = false,
previousMousePos;
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
}
};
// Sender drawing function.
function drawLineImmed(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = 'white';
ctx.stroke();
};
// Receiver drawing function.
function drawLineTwo(data) {
ctx.beginPath();
ctx.moveTo(data.px, data.py);
ctx.lineTo(data.mx, data.my);
ctx.strokeStyle = 'white';
ctx.stroke();
};
// Get draw data. Pass to receiver drawing function.
socket.on('draw', function(data) {
drawLineTwo(data);
});
// Sender emit drawing data.
function mouseMove(evt) {
var mousePos = getMousePos(canvas, evt);
if (painting) {
drawLineImmed(previousMousePos.x, previousMousePos.y, mousePos.x, mousePos.y);
socket.emit('draw', {px:previousMousePos.x, py:previousMousePos.y, mx:mousePos.x, my:mousePos.y}, page);
previousMousePos = mousePos;
};
};
function clicked(evt) {
previousMousePos = getMousePos(canvas, evt);
painting = true;
};
function release(evt) {
painting = false;
};
function leave(evt) {
painting = false;
};
$(document).ready(function() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
painting = false;
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mousedown', clicked);
canvas.addEventListener('mouseup', release);
canvas.addEventListener('mouseleave', leave);
});
// CSS
#canvas {
border-radius: 2px;
background-color: rgb(33,37,43);
position: fixed;
left: 1.7%;
top: 3%;
border-radius: 8px;
border-style: solid;
border-width: 3px;
border-color: black;
width: 80%;
}
相对于什么必须缩放?
最佳答案
正如Blindman67指出的,画布有2种尺寸。定义画布中像素数的大小(canvas.width
和canvas.height
)以及由CSS设置的显示画布的大小。
我调整大小的正常方式是这样的
function resizeCanvasToMatchDisplaySize(canvas) {
// look up the size the canvas is displayed
var desiredWidth = canvas.clientWidth;
var desiredHeight = canvas.clientHeight;
// if the number of pixels in the canvas doesn't match
// update the canvas's content size.
if (canvas.width != desiredWidth || canvas.height != desiredHeight) {
canvas.width = desiredWidth;
canvas.height = desiredHeight;
}
}
然后在绘图之前调用它(例如可以在mouseMove中)。这样,仅在尺寸更改时才清除画布。
您也可以使用
canvas.getBoundingClientRect()
和it is technically more correct,但它也会生成垃圾,对我而言,这通常是不好的。对于我来说,对您来说,这没关系。每当您设置/更改画布的大小时,有关它的所有内容都会重置并清除。这意味着,更改大小时,其他设置(例如
fillStyle
,lineWidth
等)都将重置为默认值。如果您希望某些内容在调整大小之前保持不变,则需要以某种方式进行记录。想法包括跟踪到目前为止绘制的所有内容,并在调整大小后再次绘制。另一个想法是使用类似的方法将当前画布复制到另一个屏幕外画布 // make a new canvas if we haven't already
offscreenCanvas = offscreenCanvas || document.createElement("canvas");
// make the offscreen canvas match the size of the onscreen canvas
offscreenCanvas.width = onscreenCanvas.width;
offscreenCanvas.height = onscreenCanvas.height;
// get a context for a offscreen canvas
offscreenCanvasContext = offscreenCanvas.getContext("2d");
// clear it just in case it's old and the size didn't change.
offscreenCanvasContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
// copy the onscreen canvas to the offscreen canvas
offscreenCanvasContext.drawImage(onscreenCanvas, 0, 0);
// resize the onscreen canvas
reiszeCanvasToMatchDisplaySize(onscreenCanvas);
// copy back the old content
onscreenCanvasContext.drawImage(offscreenCanvas, 0, 0);
// free the memory used by the offscreen canvas
offscreenCanvas.width = 0;
offscreenCanvas.height = 0;
当然,如果旧的画布尺寸较大,您将最终裁剪内容。
另外,如果画布的drawingBuffer大小(像素数)与显示大小you can do the math to make the mouse position still match不匹配
关于javascript - HTML canvas绘图应用程序在不同的屏幕尺寸上中断,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39419013/