Question

我对编码很新。我的项目是放大基于100px正方形的画布图像。当我在网格中移动时，我的选择器方块在图像上成功移动，旧方块被删除。

这是我的代码：

HTML

<!doctype HTML>
<html lang="en">
<head>
<script src="draw.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="400" height="600" style='border:3px solid red'>
</canvas>
</section>
</body>

JAVASCRIPT

    function doFirst(){
    var x = document.getElementById('canvas')
    canvas=x.getContext('2d');
    canvas.strokeStyle = "blue";
    var pic= new Image();
    pic.src = "tut.jpg";
    pic.addEventListener ("load",function(){canvas.drawImage(pic,0,0)},false);

    }

    function select(e){
    var xPos=e.clientX;
    var yPos=e.clientY;

    var locationX = Math.floor(xPos/100)*100
    var locationY = Math.floor(yPos/100)*100
    var pic= new Image();
    pic.src = "tut.jpg";
    canvas.drawImage(pic,0,0);
    canvas.strokeRect(locationX,locationY,100,100);
    }

    function zoom (e) {
    var locationX = Math.floor(xPos/100)*100
    var locationY = Math.floor(yPos/100)*100

    canvas.translate(-locationX,-locationY);
    canvas.scale(5,5);
    }


    window.addEventListener ("load", doFirst, false);
    window.addEventListener ("mousemove", select, false);
    window.addEventListener("mousedown",zoom,false);

缩放功能根本没有启动。而且我不确定如何继续下一个函数 - 一个简单的着色应用程序 - =而不是一旦它具有返回到选择函数 - 顺序函数仍然有点神秘。请原谅任何天真，因为我可能在这段代码中做了一些巨大的支持。

非常感谢，

尼克

Answer 1

回答有关zoom()的问题：

JavaScript中的变量在函数范围内运行。也就是说，函数中声明的任何变量只对该函数内的任何内容保持可见。

当您尝试在xPos中使用yPos和zoom()时，您会获得undefined个值，因为xPos和yPos是仅在select()内声明。

xPos和yPos也需要在zoom()中声明和计算。

Answer 2

当然！谢谢。变焦功能看起来比我想象的要难一点：比例似乎抛出偏移。

此外，我的动画广场在Chrome和IE上也有所不同。多么奇怪。在IE上流畅但在Chrome上闪烁。

是否有一个阅读有关创建一系列函数事件的好地方，或者我只是将一个函数放在另一个函数中？

非常感谢您的帮助，

尼克

网格缩放 - html5画布转换不起作用

2 个答案: