画布绘制错误（HTML5和JavaScript）_Javascript_Html_Canvas

画布绘制错误（HTML5和JavaScript）

javascript html canvas

画布绘制错误（HTML5和JavaScript）,javascript,html,canvas,Javascript,Html,Canvas,我通常可以研究我的问题，从别人的错误中得到答案，但这次我有一个相当不寻常的时间来寻找答案。其概念是，您可以在16x16网格上为32x32像素着色。我的完整代码如下： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jscolor.js"></script> <title>Tiles</title> </hea

我通常可以研究我的问题，从别人的错误中得到答案，但这次我有一个相当不寻常的时间来寻找答案。其概念是，您可以在

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>


瓷砖
哎呀，你没有画布
var draw_a=document.getElementById（“画布”）.getContext（“2d”）；
功能图（e）{
draw_a.fillStyle=“#”+document.getElementById（“颜色”）.value；
画图(
数学楼层（e.clientX/16），
数学楼层（e.clientX/16），
32,
32
);
}
draw_a.fillStyle=“#000000”；
绘制a.fillRect（0,0,512,512）；

您正在对单击坐标进行分割和舍入，但不会再次乘以该值以映射到画布坐标-点之间也应该有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);

最后，您的颜色输入应该具有

id

的

color

，而不是

类

在

@Alnitak上运行（至少使用Chrome）演示时，它不起作用，我希望有人能纠正我。定义“不起作用”。@Alnitak很好，它拒绝给任何其他像素上色

math。floor

JavaScript区分大小写。谢谢，我忘了这一点，但它仍然拒绝写“document.getElementById（“color”）“为空”