单步执行时Javascript行为会发生变化 [英] Javascript behavior changes when single-stepping
问题描述
如果我单步执行以下js代码（在OS X上使用Firefox 44），我会得到所需的结果： context.setTransform（...）是执行并且图像被放大2。
If I single-step the following js code (using Firefox 44 on OS X), I get the desired result: the context.setTransform(...) is executed and the image is magnified by 2.
如果另一方面我通过简单地加载页面来运行FF中的代码，就好像永远不会应用转换一样。 （结果与注释掉 context.setTransform（...）行相同。）
If on the other hand I run the code in FF by simply loading the page, it is as if the transformation is never applied. (The outcome is then identical to having commented out the context.setTransform(...) line.)
罪魁祸首似乎是 context.save（） / context.restore（）对。评论这两行将直接产生预期的结果。但是最好用保存/恢复来包装图形代码以隔离上下文，尤其是当前的转换。
The culprit appears to be the context.save()/context.restore() pair. Commenting these two lines out produces the desired outcome directly. But it is good practice to wrap graphics code with save/restore to isolate the context, especially the current transformation.
你可以生成你身边的图像 convert -size 100x100 plasma：fractal plasma_fractal1.jpg 。
我知道设置img.src的顺序是挑剔，但我正在听取正确的，多浏览器安全的订单。
I understand that the order of setting img.src is rather finicky, but I'm heeding the correct, multi-browser-safe, order.
发生了什么事？
myfrac.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 600px;
height: 400px;
background: #BBBBBB;
margin: 20px;
padding: 15px;
}
#myCanvas {
background-color: white;
border: 2px solid black;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div>
<canvas id="myCanvas">
<p>Canvas not available</p>
</canvas>
</div>
<script src="myfrac.js" type="text/javascript"></script>
<script>myDrawingFunction()</script>
</body>
</html>
myfrac.js
function myDrawImage(context, imageURI, x, y, w, h)
{
var img = new Image;
img.onload = function(){
context.drawImage(img, x, y, w, h);
};
img.src = imageURI;
}
function myDrawingFunction()
{
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.setTransform(2, 0, 0, 2, 0, 0);
myDrawImage(context, "plasma_fractal1.jpg", 0, 0, 200, 200);
context.restore();
}
推荐答案
这是完全正常和预期的行为。
That's completely normal and expected behavior.
您正在混合同步和异步调用。
You are mixing synchronous and asynchronous calls.
同步调用将按书面顺序逐个进行，异步的应该堆叠在要执行的操作之上。
Synchronous calls will be made one by one, in written order, while asynchronous ones should be stacked on top of the operations to execute.
因此，您的代码将逐步执行：
So a step by step of your code would be :
- 获取
myfrac.js - 定义
myDrawImage函数和myDrawingFunction函数* - 调用
myDrawingFunction - 定义
画布和ctx变量 - 清除上下文（如果之前没有绘制任何内容则无用，如果有的话，之前的var定义应该在这里绘制）
- 保存上下文属性
- 调用
myDrawImage - 定义
img - 设置
onload事件处理程序（此处理程序将被堆叠） - 设置
img的src - 恢复上下文属性（未绘制任何内容）还有））
- 如果有其他任何脚本必须做其他事情
- Fetch
myfrac.js - Define
myDrawImagefunction andmyDrawingFunctionfunction * - Call
myDrawingFunction - Define
canvasandctxvariables - Clear the context (useless if nothing was drawn before and if something was, previous var definitions should be made outta here)
- Save the context properties
- Call
myDrawImage - Define
img - Set its
onloadevent handler (this handler will be stacked) - Set
img'ssrc - Restore the context properties (nothing was drawn on it yet)
- Do anything else has to be done by other scripts if any
的&NBSP; 12 + X。调用img onload handler = drawImage（）
如你所见，当时<$调用c $ c> onload 处理程序，你已经恢复了上下文的属性，并重置了上下文的矩阵。
As you can see, at the time the onload handler is called, you already restored the context's properties, and reset the context's matrix.
* 命令其中两个不能保证
这篇关于单步执行时Javascript行为会发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
