Canvas 画布坐标

Canvas 画布坐标,canvas,mouse,coordinates,Canvas,Mouse,Coordinates,所以我对Html/Javascript还不熟悉。所以我决定玩画布和显示瓷砖,并获得鼠标点击。我试图做的是让鼠标点击,然后将用户点击的瓷砖变成不同的颜色。问题是我如何得到用户单击以转换为平铺坐标的位置。似乎我走的越远,它的准确度也越低 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" />

所以我对Html/Javascript还不熟悉。所以我决定玩画布和显示瓷砖,并获得鼠标点击。我试图做的是让鼠标点击,然后将用户点击的瓷砖变成不同的颜色。问题是我如何得到用户单击以转换为平铺坐标的位置。似乎我走的越远,它的准确度也越低

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Fun Canvas!!!</title>
    <style>
        canvas 
        {
            position: relative;
            padding-left: 0;
            padding-right: 0;
            margin-left: auto;
            margin-right: auto;
            display: block;
            border:1px solid #000000;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        // Map Related
        var m_iTotalWidth;
        var m_iTotalHeight;
        var m_iMapWidth = 60;
        var m_iMapHeight = 30;
        var m_iTileWidth;
        var m_iTileHeight;
        var m_bColorFull = new Array(m_iMapWidth);
        var m_cColors = ['#FF0000', '#FF7700', '#FFFF00', '#00FF00', '#1500FF', '#C700FF'];
        var m_cDefaultColor = "#000";
        var m_CanvaContext;
        var m_Canvas;
        var m_iBorderLength = 1;

        // Map Color related
        var iMin = 0;
        var iMax = 255;
        var m_iPrevX = 0;
        var m_iPrevY = 0;

        // GameSpeed
        var m_iGameSpeed = 60;

        var m_IntervalID;
        document.addEventListener("DOMContentLoaded", initialize, false);
        document.documentElement.style.overflowX = 'hidden';     // horizontal scrollbar will be hidden
        document.documentElement.style.overflowY = 'hidden';

        function initialize() {
            m_IntervalID = window.setInterval("gameLoop();", m_iGameSpeed);

            // Get canvas context for drawing
            m_CanvasContext = document.getElementById("myCanvas").getContext("2d");
            setCanvasSize();
            m_Canvas = document.getElementById("myCanvas");
            document.addEventListener('mousedown', getPosition, false);

            for (var x = 0; x < m_iMapWidth; x++) {
                m_bColorFull[x] = new Array(m_iMapHeight);

                for (var y = 0; y < m_iMapHeight; y++)
                {
                    if (y == 0)
                        paintTile(x, y, "white", 2);

                    m_bColorFull[x][y] = false;
                }
            }

            drawMap();
            gameLoop();
        }

        // Runs all the functions required for the game to work.
        function gameLoop() {
            drawMap();
        }

        // Draws everything on the canvas.
        function drawMap() {

            for (var x = 0; x < m_iMapWidth; x++)
                for (var y = 1; y < m_iMapHeight; y++) {

                    if (m_bColorFull[x][y])
                        paintTile(x, y, getRandomColor(0, 255), 2);

                    else
                        paintTile(x, y, m_cDefaultColor, 2);
                }
        }

        // Paints a tile on the screen, handles converting pixel to tile.
        function paintTile(x, y, color, borderThickness) 
        {
            m_CanvasContext.fillStyle = color;
            m_CanvasContext.fillRect((x * m_iTileWidth) + borderThickness, (y * m_iTileHeight) + borderThickness, m_iTileWidth - (borderThickness * 2), m_iTileHeight - (borderThickness * 2));
        }

        // Handles clicks.
        function getPosition(event)
        {
            var rect = m_Canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;
            x = Math.round(x / m_iTileWidth);
            y = Math.round(y / m_iTileHeight);

            for (var xIndex = 0; xIndex < m_iMapWidth; xIndex++)
                for (var yIndex = 0; yIndex < 1; yIndex++)
                    paintTile(xIndex, yIndex, "white", 0);

            writeMessage(1, "black", x + "-" + y);
            m_bColorFull[x][y] = !m_bColorFull[x][y];
        }

        // Sets the canvas as big as the broswer size.
        function setCanvasSize()
        {
            m_CanvasContext.scale(1, 1);
            m_iTileWidth = Math.floor(m_CanvasContext.canvas.width / m_iMapWidth);//Math.floor(window.innerWidth / m_iMapWidth);
            m_iTileHeight = Math.floor(m_CanvasContext.canvas.height / m_iMapHeight); //Math.floor(window.innerHeight / m_iMapHeight);
            //m_CanvasContext.canvas.width = (m_iTileWidth * m_iMapWidth);
            //m_CanvasContext.canvas.height = (m_iTileHeight * m_iMapHeight);
        }

        function writeMessage(startTile, color, message) 
        {
            m_CanvasContext.font = '16pt Calibri';
            m_CanvasContext.fillStyle = color;
            m_CanvasContext.fillText(message, startTile * m_iTileWidth, 16);
        }
        /*********************************************************************************************************/
        /*USEFULL FUNCTIONS*/

        function getRandomColor(iMin, iMax) {

            //return m_cColors[getRandomNumber(0, m_cColors.length)];
            // creating a random number between iMin and iMax
            var r = getRandomNumber(iMin, iMax)
            var g = getRandomNumber(iMin, iMax)
            var b = getRandomNumber(iMin, iMax)

            // going from decimal to hex
            var hexR = r.toString(16);
            var hexG = g.toString(16);
            var hexB = b.toString(16);

            // making sure single character values are prepended with a "0"
            if (hexR.length == 1)
                hexR = "0" + hexR;

            if (hexG.length == 1)
                hexG = "0" + hexG;

            if (hexB.length == 1)
                hexB = "0" + hexB;

            // creating the hex value by concatenatening the string values
            var hexColor = "#" + hexR + hexG + hexB;
            return hexColor.toUpperCase();
        }

        function getRandomNumber(iMin, iMax) {
            return Math.floor((Math.random() * (iMax - iMin)) + iMin);
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="500" style="border:1px solid #000000;">
</canvas>
</body>
</html>

有趣的画布!!!
帆布
{
位置:相对位置;
左侧填充:0;
右边填充:0;
左边距:自动;
右边距:自动;
显示:块;
边框:1px实心#000000;
身高:100%;
宽度:100%;
}
//地图相关
var m_iTotalWidth;
var m_iTotalHeight;
var m_iMapWidth=60;
var m_iMapHeight=30;
m_iTileWidth变量;
var m_Itilheight;
var m_bColorFull=新数组(m_iMapWidth);
变量m#cColors=['#FF0000'、'#FF7700'、'#FFFF00'、'#00FF00'、'#1500FF'、'#C700FF';
var m_cDefaultColor=“#000”;
var m_CanvaContext;
var m_画布;
var m_iBorderLength=1;
//地图颜色相关
var-iMin=0;
var iMax=255;
var m_iPrevX=0;
var m_iPrevY=0;
//游戏速度
var m_iGameSpeed=60;
var m_有效期;
document.addEventListener(“DOMContentLoaded”,初始化,false);
document.documentElement.style.overflowX=“隐藏”;//水平滚动条将被隐藏
document.documentElement.style.overflowY='hidden';
函数初始化(){
m_IntervalID=window.setInterval(“gameLoop();”,m_iGameSpeed);
//获取绘图的画布上下文
m_CanvasContext=document.getElementById(“myCanvas”).getContext(“2d”);
setCanvasSize();
m_Canvas=document.getElementById(“myCanvas”);
document.addEventListener('mousedown',getPosition,false);
对于(var x=0;xvar j = Math.floor((g.mouseX / (dim + spacing)));
var i = Math.floor(g.mouseY / (dim + spacing));
grid[j][i] = "mouse is passing over here!";
var grid = new Array(grid_width);

for (var j = 0; j<grid_width; j++){
grid[j] = new Array(grid_height);
};
update = function(){
canvas.onmousedown=function(){
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
};
setInterval(update,100);