使用canvas绘制单个像素

Question

能否制作一个缩放的画布，在最终图像中，每个5x5块实际上是1个像素，并且如何在onclick事件中用存储在变量中的颜色"涂画"像素？我测试过的任何代码最终只是出现笔画，单击不起作用。

- jmoon

---

这回答您的问题吗？在HTML5画布中设置单个像素的最佳方法是什么？ - handle

Answer 1

类似这样的吗？

<canvas id="canvas" style="width:100px; height:100px" width="5" height="5"></canvas>

<script>

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    //Background
    context.fillStyle = "#000";
    context.fillRect(0, 0, canvas.width, canvas.height);



    canvas.addEventListener("click", function(e) {

        var x = Math.floor(e.x * canvas.width / parseInt(canvas.style.width));
        var y = Math.floor(e.y * canvas.height / parseInt(canvas.style.height));


        //Zoomed in red 'square'
        context.fillStyle = "#F00";
        context.fillRect(x, y, 1, 1);

    }, true);

</script>

编辑：添加了点击功能

演示：http://jsfiddle.net/Cmpde/

- Jeffrey Sweeney

---

由于某种奇怪的原因，这在FF10上无法工作，但在IE上可以。 - jmoon

有没有办法完全禁用抗锯齿？ - jmoon

@jmoon 不清楚（实际上我认为你不行），但你可以只需制作一个宽度/高度更大的大画布（比例相同），并绘制20x20的正方形。至于为什么不起作用，可能与我获取鼠标坐标的方式有关（MouseEvent.x）。 - Jeffrey Sweeney

问题在于我需要一个精确大小的base64 png，只有在编辑时才会看起来更大。 - jmoon

在moz和webkit中，您可以使用以下代码禁用画布平滑处理：ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; - forresto