使用画布绘制单个像素

Posted 2023-03-05

【中文标题】使用画布绘制单个像素

【英文标题】：Drawing a single pixel w/canvas

【发布时间】：2012-03-22 11:35:19

【问题描述】：

是否可以说，在最终图像中每个 5x5 块实际上是 1 个像素的放大画布，以及如何使用存储在变量 onclick 中的颜色“绘制”像素？我测试过的任何代码最终都是笔画，由于某种原因，单击什么也没做。

【问题讨论】：

这能回答你的问题吗？ What's the best way to set a single pixel in an html5 canvas?

【参考方案1】：

这样的？

<canvas id="canvas" style="width:100px; height:100px"  ></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/

【讨论】：

出于某种奇怪的原因，这在 FF10 上不起作用，但在 IE 上起作用。

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

@jmoon 不知道（实际上我不认为你可以），但你可以制作一个更大宽度/高度的大画布（如，一切都是成比例的），并且绘制 20x20 的正方形。至于为什么 id 不起作用，它可能与我如何获取鼠标坐标（MouseEvent.x）有关。

问题是我需要它是一个精确大小的base64 png，并且只有在编辑时看起来更大

在 moz 和 webkit 中，您可以使用以下命令禁用画布平滑：ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false;