我已经尝试了我在此处看到的所有内容，但似乎对我的代码没有任何作用，或者我只是不知道如何应用它。
我试图在我的 html Canvas 中获得更好的分辨率，因为矩形看起来有点“模糊”。
这是我的代码: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Resize</title>
<style>
canvas {
border: 1px solid black;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<canvas id="sig-canvas" width="1280" height="739"></canvas>
<p id="timer"></p>
<script src="canvas.js"></script>
</body>
</html>
JavaScript:
var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
mousePos = getMousePos(canvas, e);
drawing = true;
}, false);
// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
};
}
// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
})();
// Draw to the canvas
function renderCanvas() {
if (drawing) {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(mousePos.x, mousePos.y, 25, 25);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
lastPos = mousePos;
}
}
// Allow for animation
(function drawLoop () {
requestAnimFrame(drawLoop);
renderCanvas();
})();
这是我的 fiddle :https://jsfiddle.net/8cp5qmob/
谢谢!
最佳答案
为了增加 Canvas 的分辨率，我将 canvas.style.width 和 canvas.style.height 混合使用取得了很好的效果(对于需要多少像素在屏幕上)与 canvas.width 和 canvas.height(内部使用的像素数)。它看起来像这样:
JavaScript:
var displayWidth = 1280;
var displayHeight = 739;
var canvas = document.getElementById("sig-canvas");
var scale = 2;
canvas.style.width = displayWidth + 'px';
canvas.style.height = displayHeight + 'px';
canvas.width = displayWidth * scale;
canvas.height = displayHeight * scale;
Canvas 的大小是有限制的。参见 this Mozilla Developer Network page了解更多信息。
使用此技术的另一个棘手问题是，在屏幕坐标与 Canvas 坐标之间进行转换时，您必须乘以或除以比例。在本例中，我在 getMousePos 中将屏幕坐标转换为 Canvas 坐标:
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: (mouseEvent.clientX - rect.left) * scale,
y: (mouseEvent.clientY - rect.top) * scale
};
}
这是一个片段，将所有这些一起显示:
var displayWidth = 1280;
var displayHeight = 739;
var canvas = document.getElementById("sig-canvas");
var scale = 2;
canvas.style.width = displayWidth + 'px';
canvas.style.height = displayHeight + 'px';
canvas.width = displayWidth * scale;
canvas.height = displayHeight * scale;
var ctx = canvas.getContext("2d");
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
mousePos = getMousePos(canvas, e);
drawing = true;
}, false);
// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: (mouseEvent.clientX - rect.left) * scale,
y: (mouseEvent.clientY - rect.top) * scale
};
}
// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
})();
// Draw to the canvas
function renderCanvas() {
if (drawing) {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(mousePos.x, mousePos.y, 25, 25);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
lastPos = mousePos;
}
}
// Allow for animation
(function drawLoop () {
requestAnimFrame(drawLoop);
renderCanvas();
})();canvas {
border: 1px solid black;
}
body {
margin: 0px;
}<canvas id="sig-canvas"></canvas>关于javascript - 增加 HTML5 Canvas 分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50566991/