图像在画布上的错误位置答案

【问题标题】：Image at wrong location on canvas图像在画布上的错误位置
【发布时间】：2017-07-08 00:03:47
【问题描述】：

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

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>

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

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

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

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

为确保您确实得到了不匹配，最好完全避免使用canvas.style.width 和canvas.style.height 属性，而直接设置canvas.width 和height 属性。注意这些值总是像素并且没有后缀，即canvas.width = "100%" 将不起作用

这个问题很容易解决。

下面我对你的sn-p做了修改，并用cmets标记了

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>

【讨论】：

您是如何获得innerWidth 和innerHeight 变量的？否则，谢谢。
@opfromthestart innerWidth 和 innerHeight 是作为窗口对象一部分的标准全局变量。 developer.mozilla.org/en-US/docs/Web/API/Window