这个问题几乎都说明了.我一直在寻找并开始担心这是不可能的.
我有这个画布元素,我正在绘制文字.我想设置类似于CSS letter-spacing属性的字母间距.我的意思是在绘制字符串时增加字母之间的像素数量.
我绘制文本的代码是这样的,ctx是画布上下文变量.
ctx.font = "3em sheepsans";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillText("Blah blah text", 1024 / 2, 768 / 2);
Run Code Online (Sandbox Code Playgroud)
我ctx.letterSpacing = "2px";在绘图之前尝试过添加,但没有用.有没有办法只用一个简单的设置来做到这一点,或者我是否必须创建一个函数来单独绘制每个字符的间距?
我肯定以前会问过这个问题,但我找不到任何相似的东西(有些问题略有相似)
移动浏览器的一个趋势是在向下滚动时隐藏地址栏,这很好,但是对于严重依赖于基于百分比的元素高度的网站存在问题,比如我现在正在制作的响应式网站.
问题是,视口大小会根据地址栏的可见性而变化.这意味着,当地址栏不可见时,100%高度会大于可见时的大小.滚动时,这会导致网站重新配置不稳定.这在移动版Google Chrome上尤其成问题,因为只要您在页面中的任何位置向上滚动,地址栏就会返回.很多不稳定的重新配置.
在没有地址栏的浏览器方面,我希望100%表示100%.无论我采取什么解决方案,都需要一些Javascript,但我似乎无法找到获取此信息的方法.想到的一个选项是屏幕高度,但这意味着不会考虑移动操作系统的通知栏或任何其他永久浏览器UI元素.所以我想这是第一步,下一步是找到最有说服力的方法将这个高度引入所有基于百分比的高度元素(我知道它可以通过Javascript完成,如果我可以保持这一点会很好尽管如此,并且不会对resize事件进行元素重新调整.)
答案非常感谢.
我一直在四处寻找,我开始担心这是不可能的.
有没有办法制作<audio>带有后备的标准标签......
<audio>
<source src='song.ogg' type='audio/ogg'></source>
<source src='song.mp3' type='audio/mp3'></source>
</audio>
Run Code Online (Sandbox Code Playgroud)
...有一个onload事件.我环顾四周,所有我能找到的是一些可能会或可能不起作用的黑客(它们不适合我在Chrome上)和canplaythrough活动.
我想要这个的原因是因为我正在制作一个包含大量音频片段的演示文稿.我不希望演示文稿在加载所有音频之前开始(否则事情可能会失去同步).我希望一次加载1个剪辑,这样我就可以创建一种加载条.我真的不想使用Flash声音,因为这应该是演示纯网络技术.
所以基本上我有一个loadAudio循环通过要加载的音频文件数组的函数audioQueue.loadAudio被调用一次然后调用自己,直到所有文件都被加载.问题是我没有找到正确的事件来触发加载下一个文件.
loadAudio = function(index)
{
mer = audioQueue[index];
var ob = "<audio id='" + mer + "'><source src='resources/sounds/" + mer + ".ogg' type='audio/ogg'></source><source src='resources/sounds/" + mer + ".mp3' type='audio/mp3'></source></audio>";
$("#audios").append(ob);
$("#" + mer).get(0).addEventListener('A WORKING EVENT RIGHT HERE WOULD BE NICE', function() { alert("loaded");
if (index + 1 < audioQueue) { loadAudio(index + 1); } }, false);
}
Run Code Online (Sandbox Code Playgroud)
所以.是否有机会进行适当的音频上传?我基本上愿意做任何事情,只要它仍然是所有的HTML和Javascript.
使用promises,我们可以使用变量.then来在发生错误时拆分链.这是一个使用的例子fetch
fetch('http://website.com').then(
// Perform some logic
(response) => response.json().then(({ answer }) => `Your answer: ${answer}`),
// Skip json parsing when an error occurs
(error) => 'An error occurred :(',
).then(console.log);
Run Code Online (Sandbox Code Playgroud)
这允许我跳过响应处理逻辑并仅响应原始fetch语句中引发的错误.RxJS中的类似内容可能如下所示:
Observable.fromPromise(fetch('http://website.com'))
// if I put .catch here, the result will be piped into flatMap and map
.flatMap(response => response.json())
.map(({ answer }) => `Your answer: ${answer}`)
// if I put .catch here, errors thrown in flatMap and map will also be caught
.subscribe(console.log);
Run Code Online (Sandbox Code Playgroud)
作为代码状态中的注释,我不能简单地将catch运算符放入,因为它与我的promise链没有相同的行为.
我知道我可以通过自定义运算符来实现它,包括实现,或者将一个错误捕获可观察到的这个与它合并,但这一切看起来都非常重要.有没有一种简单的方法来实现承诺链行为?