我正在使用HTML5画布开发一个简单的JavaScript游戏.这是一个非常典型的游戏循环设置,涉及:
在启动这个项目时,我在init()函数结束时调用了setInterval,所以只要你加载页面就开始绘制和动画,一切正常.现在我还在继续,我想在加载时绘制一个完全填充的静态游戏场,然后使用一个按钮启动主游戏循环间隔.所以我在init()的末尾添加了一个对draw()的调用,问题是当我这样做时,所有画布形状都被正确绘制,但画布上没有任何图像渲染.
如果我让draw()运行几次,它们会渲染,例如......
var previewDraw = setInterval(draw, 25);
var stopPreviewDraw = function() { clearInterval(previewDraw) }
setTimeout(stopPreviewDraw, 100)
......但这看起来很愚蠢.为什么没有一个draw()调用工作？我已经在Chrome和Firefox的控制台中记录了这些对象,关于它们的一切看起来都很好; 他们已经拥有相应的img src路径并启动可用于传递的x/y值以分配给创建的新Image(),然后通过canvas.2dcontext.drawImage()方法调用.
我正在测试Chrome 6和Firefox 3.6.10中的这个,他们都对这种行为感到困惑.Chrome的控制台中没有显示任何错误或问题但是如果我尝试只调用一次,那么只有在Firefox抛出此内容时才会调用draw():
未捕获的异常:[Exception ..."组件返回失败代码:0x80040111(NS_ERROR_NOT_AVAILABLE)[nsIDOMCanvasRenderingContext2D.drawImage]"nsresult:"0x80040111(NS_ERROR_NOT_AVAILABLE)"location:"JS frame :: http:// localhost/my-game-url / :: drawItem :: line 317"data:no]
我的谷歌搜索该错误表明图像已损坏,但它们都在预览和Photoshop中打开而没有任何问题.
我正在尝试将 React 集成到使用 Rollup 的现有应用程序中，并尝试在此过程中升级到最新的 Babel 和 Rollup 版本。当 I 时yarn build，有关未解析的依赖项和缺少全局变量名称的错误/警告输出不会提供有关哪些依赖项是问题的一部分的更多信息：
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
[object Object] (imported by commonjs-proxy:[object Object])
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
[object Object] (guessing '_object_Object_')
created public/app.js in 12.1s
? Done in 13.52s.
所以，在生成的 app.js 中，它以
(function (_object_Object_) {
'use strict';
var _object_Object___default = 'default' in _object_Object_ ? _object_Object_['default'] : _object_Object_;
// etc etc etc
}(_object_Object_));
这是我的 rollup.config.js：
/**
* …我需要向聚焦的应用程序发送一个按键，我的第一次搜索使我找到了CGEventCreateKeyboardEvent：
CGEventRef eventA = CGEventCreateKeyboardEvent(NULL, (CGKeyCode)0, true);
CFRelease(eventA);
这编译但没有做任何事情，但在试图弄清楚的过程中我发现了这个......
CGPostKeyboardEvent( (CGCharCode)'a', (CGKeyCode)0, true);
...它奏效了。为什么？从我到目前为止所读到的内容来看，他们应该完成同样的事情，但不推荐使用CGPostKeyboardEvent。
（如果我忽略了我显然应该包括的细节，请原谅我 - 我正在努力超越我通常的深度，试图帮助同事进行课外项目，并且只是想在此过程中学习一些东西。）
(http://codepen.io/RwwL/pen/xbNLJp上的实例)
我在使用该<symbol>元素的应用程序中包含SVG (请参阅https://css-tricks.com/svg-symbol-good-choice-icons/以获取有关原因的详细信息),以及某些图标 - 包括clip-path-当我在带有<use>元素的页面中包含他们的图标时不进行渲染.
<svg style="display: none">
<symbol id="icon-pin" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
<path fill="none" stroke="#2F3137" stroke-width="2" stroke-miterlimit="10" d="M12 2C8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3C18.7 5 15.7 2 12 2zm0 0" />
<clipPath id="pin-clip">
<path d="M12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" />
</clipPath>
<path clip-path="url(#pin-clip)" fill="#2F3137" d="M4.5 1.2h15v15h-15z" />
</symbol>
</svg>
</div>
<h2>Normal …