画布绘制错误（HTML5和JavaScript）

Question

我通常可以研究我的问题并从其他人的错误中得到答案，但这次我有一个相当不寻常的时间找到答案。 这个概念是你可以在16x16网格上着色32x32 “像素”。 我的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jscolor.js"></script>
    <title>Tiles</title>
</head>
<body>
    <canvas id="canvas" height="512" width="512" onclick="draw(window.event)">
        Oops, you don't have Canvases
    </canvas>
    <input type="text" value="000000" class="color"></input>
    <script type="text/javascript">
        var draw_a = document.getElementById("canvas").getContext("2d");
        function draw(e) {
            draw_a.fillStyle = "#" + document.getElementById("color").value;
            draw_a.fillRect(
                math.floor( e.clientX / 16 ),
                math.floor( e.clientX / 16 ),
                32,
                32
            );
        }
        draw_a.fillStyle = "#000000";
        draw_a.fillRect( 0 , 0 , 512 , 512 );
    </script>
</body>
</html>

Answer 1

您正在对点击坐标进行划分和舍入，但不会将值再次向上再次映射到画布坐标 - 点之间也应该有32个像素，而不是16个像素。

还没有math.floor这样的函数，它应该是Math.floor ：

var x = 32 * Math.floor(e.clientX / 32);
var y = 32 * Math.floor(e.clientY / 32);
draw_a.fillRect(x, y, 32, 32);

最后，您的颜色输入应该具有color id ，而不是class

在http://jsfiddle.net/alnitak/VJNdR/工作（至少在Chrome中）演示

画布绘制错误（HTML5和JavaScript）

问题描述

1 个解决方案

解决方案1
2 2012-06-14 21:38:16

画布绘制错误（HTML5和JavaScript）

问题描述

1 个解决方案

解决方案1 2 2012-06-14 21:38:16

解决方案1
2 2012-06-14 21:38:16