Question

我正在尝试制作一个基于光标移动的游戏（比如agar.io），但是当在画布上渲染图像时，它会比我想要的距离原点放置大约4倍。 / p>

Javascript，CSS，HTML：

function combined() {
    movechar(direction())
    draw()
}
function draw() {
    //context.save()
    context.clearRect(0, 0, canvas.width, canvas.height);
    //cont.restore()
    context.drawImage(img, xChar, yChar)
    //context.drawImage(img,1,1)
}
function direction() {
    var delX = xCor - xChar
    var delY = yCor - yChar
    var delta = Math.sqrt(delX * delX + delY * delY)
    var dirX = delX / delta
    var dirY = delY / delta
    return [dirX, dirY]
}
function movechar(dirArr) {
    xChar += dirArr[0]
    yChar += dirArr[1]
}
var d = new Date()
var sTime = d.getTime()
console.log(sTime)
var canvas = document.getElementById("playerCanvas")
var context = canvas.getContext('2d')
context.im
var img = new Image()
img.src = "char.bmp", img.width = 8, img.height = 8
var xCor = 0
var yCor = 0
var xChar = canvas.clientWidth / 2
var yChar = canvas.clientHeight / 2
$("canvas").on("mousemove", function (e) { xCor = e.clientX; yCor = e.clientY; })
function docload() { setInterval(combined,30) }

body {
    margin: 0px;
    overflow: hidden;
}
canvas#playerCanvas {
    width : 100%;
    height : 100%;
    margin : 0%;
    background-image : url("floor2.bmp");
    background-repeat : repeat;
}

<html>
<head>
    <title>wizard.io</title>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="koolLooks.css">
    <noscript>Ur browser sux</noscript>
</head>
<body onload="docload()">
    <canvas id="playerCanvas"></canvas>
    <script src="ok2hax.js"></script>
    <script src="eligal2hax.js"></script>
</body>
</html>

Answer 1

当画布分辨率与显示尺寸不匹配时。

渲染到画布时，它通常是画布像素。画布中的像素数通过width和height属性设置，并定义画布分辨率。

当显示画布并通过canvas.style和高度设置显示大小时，这不会改变画布分辨率，只会改变大小。结果是您拉伸画布像素以覆盖许多CSS像素。然后，当您尝试使用CSS像素中的鼠标坐标绘制时，它与鼠标下画布上的像素不匹配。

为确保您确实遇到不匹配，最好避免使用canvas.style.width和canvas.style.height属性，只需直接设置canvas.width和height属性即可。请注意，这些值始终是像素，不是后缀，即canvas.width = "100%"不起作用

问题很容易解决。

下面我对您的代码段进行了更改并使用注释标记了

function combined() {
    movechar(direction())
    draw()
}
function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "red";
    //--------------------------------------------------------------------
    // as your images had bad URL I put boxes in there place
    
    context.strokeRect(xChar, yChar,50,50)
     context.fillRect(xCor-10, yCor-10,20,20)
}
function direction() {
    var delX = xCor - xChar
    var delY = yCor - yChar
    var delta = Math.sqrt(delX * delX + delY * delY)
    var dirX = delX / delta
    var dirY = delY / delta
    return [dirX, dirY]
}
function movechar(dirArr) {
    xChar += dirArr[0]
    yChar += dirArr[1]
}
var d = new Date()
var sTime = d.getTime()

var canvas = document.getElementById("playerCanvas")
var context = canvas.getContext('2d')

//====================================================================
// IMPORTANT BIT
//--------------------------------------------------------------------
// set the canvas size to the window size

canvas.width = innerWidth;
canvas.height = innerHeight;
//--------------------------------------------------------------------

context.im
var xCor = 0
var yCor = 0

//--------------------------------------------------------------------
// use the canvas height and width rather than clientWidth height

var xChar = canvas.width / 2
var yChar = canvas.height / 2
//--------------------------------------------------------------------

// change listener just to make it work no JQuery
canvas.addEventListener("mousemove", function (e) { xCor = e.clientX; yCor = e.clientY; })
function docload() { setInterval(combined,30) }

body {
    margin: 0px;
    overflow: hidden;
}
canvas#playerCanvas {

    /* not needed as they are stretching the canvas
    width : 100%;
    height : 100%;

    */

    margin : 0%;
    background-image : url("floor2.bmp");
    background-repeat : repeat;
}

<html>
<head>
    <title>wizard.io</title>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="koolLooks.css">
    <noscript>Ur browser sux</noscript>
</head>
<body onload="docload()">
    <canvas id="playerCanvas"></canvas>
    <script src="ok2hax.js"></script>
    <script src="eligal2hax.js"></script>
</body>
</html>

图像在画布上的错误位置

1 个答案:

当画布分辨率与显示尺寸不匹配时。

问题很容易解决。