是否可以说,在最终图像中每 5x5 block 实际上是 1 个像素的放大 Canvas 以及您如何使用存储在变量 onclick 中的颜色“绘制”像素?我测试过的任何代码最终都变成了笔画,由于某种原因点击什么都不做。
最佳答案
是这样的吗?
<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>
编辑:添加点击功能
关于javascript - 使用 Canvas 绘制单个像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9559159/