Question

亲爱的堆栈溢出社区，

我目前正在研究一个项目。我的目标是为放大画布中的单个像素着色。

但是我何时使用：

     <!DOCTYPE html>
<html>
<meta charset='UTF-8'>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:3px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var mouseDown = 0;

function mouseDownFunction() {
    ++mouseDown;
}

function mouseUpFunction() {
    --mouseDown;
} 

function mouseMoveFunction(e) {

    var posX = e.clientX;
    var posY = e.clientY;

    ctx.fillRect(posX - 10, posY - 10, 100, 100);
}

    c.addEventListener("mousedown", function(e){
    mouseDownFunction();
    this.addEventListener("mousemove", mouseMoveFunction);
    });

    c.addEventListener("mouseup", function(e){
    mouseUpFunction();
    this.removeEventListener("mousemove", mouseMoveFunction);
    });

    c.addEventListener("click", mouseMoveFunction);

    c.addEventListener("mouseout",function(e){
    this.removeEventListener("mousemove", mouseMoveFunction);
    });

    c.addEventListener("mouseenter",function(e){
    if (mouseDown == 1) {
    this.addEventListener("mousemove", mouseMoveFunction);
    }});

</script>

</body>
</html>

我的功能 停止工作。

这是我的JavaScript代码：

<$>

放大和缩小画布以方便访问单个像素的最佳实践是什么？

提前感谢您的时间。

此致， JavaIsMyBae

Javascript：如何放大Canvas，以使我的功能仍然有效？

0 个答案: