錯誤位置在畫布上的圖像

我試圖製作一個基於光標移動的遊戲（如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>

來源

2017-07-08 opfromthestart

當屏幕的分辨率不匹配的顯示尺寸。

當您渲染到畫布時，它通常以畫布像素顯示。畫布中的像素數量通過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>

來源

2017-07-08 04:03:14 Blindman67

你是怎麼得到的'innerWidth'和'innerHeight'變量標記呢？否則，謝謝。 – opfromthestart

@opfromthestart'innerWidth'和'innerHeight'是作爲窗口對象的一部分的標準全局變量。 https://developer.mozilla.org/en-US/docs/Web/API/Window – Blindman67

錯誤位置在畫布上的圖像

回答

當屏幕的分辨率不匹配的顯示尺寸。

問題很容易解決。

相關問題