0

私は通常、自分の問題を調査して、他の人の間違いから答えを得ることができますが、今回は、答えを見つけるのにかなり珍しい時間を費やしています。概念は、グリッド32x32上の「ピクセル」に色を付けることができるということです。16x16私の完全なコードは次のとおりです。

<!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>
4

1 に答える 1

2

クリック座標を分割して丸めていますが、キャンバス座標にマップするために値を再度乗算することはありません。ポイント間には 16 ではなく 32 ピクセルが必要です。

のような関数もありません。次のよう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);

最後に、色の入力にはではなくidof が必要です。colorclass

http://jsfiddle.net/alnitak/VJNdR/での (少なくとも Chrome での) デモの動作

于 2012-06-14T21:38:16.913 に答える