最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Drawing a single pixel wcanvas - Stack Overflow

programmeradmin7浏览0评论

Is it possible to make say, a zoomed in canvas where every 5x5 block is actually 1 pixel in the final image and how do you "paint" the pixel with a color stored in a variable onclick? Any code I've tested ends up being strokes, clicking does nothing for some reason.

Is it possible to make say, a zoomed in canvas where every 5x5 block is actually 1 pixel in the final image and how do you "paint" the pixel with a color stored in a variable onclick? Any code I've tested ends up being strokes, clicking does nothing for some reason.

Share Improve this question asked Mar 4, 2012 at 21:52 jmoonjmoon 5763 gold badges7 silver badges18 bronze badges 1
  • Does this answer your question? What's the best way to set a single pixel in an HTML5 canvas? – handle Commented Feb 11, 2020 at 10:24
Add a ment  | 

1 Answer 1

Reset to default 4

Something like this?

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

Edit: Added click functionality

Demo: http://jsfiddle/Cmpde/

发布评论

评论列表(0)

  1. 暂无评论