小编Kai*_*ido的帖子

我试图在图像/对象标签中设置SVG动画,但它无法正常工作

svg {
  width: 100%;
  height: 200px;
}

.rotate-45 {
  transform-origin: center;
  transform: rotate(45deg);
}

.rotate {
  transform-origin: center;
  animation: rotate 1s ease-in-out infinite;
}

.rotate-back {
  transform-origin: center;
  animation: rotate 1s ease-in-out infinite;
  animation-direction: alternate;
}

.left {
  animation: move 1s ease-in-out infinite;
}

.right {
  animation: move 1s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(calc(90deg + 45deg));
  }
}

@keyframes move {
  50% {
    transform: translate(-30px, -30px);
  }
}

 <svg width="100%" height="100%" viewBox="0 0 1000 …

上周我开始用nodejs学习Javascript后端。在使用async函数时，我想从各个方面了解这一点，并开始对此主题进行研究。
我在 jsconf 中找到了 Jake Archibald 的演示，并尝试了解什么是事件循环以及事件循环如何在不同队列中运行以及它可以处理哪些队列。

我认为本演示文稿中的一张图表非常适合理解所有内容。

但我想知道事件循环如何处理由承诺回调组成的作业队列。
我们可以在该图中为该队列添加另一条路线吗？

。（我尝试将其实现到图中:)）

我想知道的另一个问题是，事件循环对渲染队列做了什么？事件循环是否将其发送到另一个地方？因为我们知道事件循环会将事件队列或作业队列中的函数发送到 javascript 引擎中的调用堆栈来运行这些函数。
但渲染队列有请求动画帧和其他样式元素。
事件循环是否将请求动画帧部分发送到 javascript 引擎并将其他布局、样式和绘制部分发送到布局引擎？

我正在使用 捕获用户的音频和视频，navigator.mediaDevices.getUserMedia()然后使用MediaRecorder并将ondataavailable该视频和音频 blob 存储在本地以便稍后上传。

现在我正在处理一个问题，由于某种原因，ondataavailable在录音过程中停止被调用。我不知道为什么，也没有收到任何出错的警报。首先，有谁知道为什么会发生这种情况以及如何捕获错误？

其次，我尝试过重现。通过做这样的事情。

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(camera) {
          local_media_stream = camera;
          camera.getVideoTracks()[0].onended = function() { console.log("VIDEO ENDED") }
          camera.getAudioTracks()[0].onended = function() { console.log("Audio ENDED") }
          camera.onended = function() { console.log("--- ENDED") }
          camera.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); };
  }).catch(function(error) {
        alert('Unable to capture your camera. Please check logs.' + error);
        console.error(error);
  });

并记录流

recorder = new MediaRecorder(local_media_stream, {
    mimeType: encoding_options,
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: …

根据零成本异步堆栈跟踪， V8 使用微任务中的 Promise 引用来重建“异步堆栈跟踪”。我假设调试器中也使用了类似的技术，它也显示了“异步堆栈”。然而，当调试“伪递归函数”时，例如使用以下函数requestAnimationFrame：

(function tick() { requestAnimationFrame(tick); })();

然后 Chrome 还显示了一些“异步堆栈”，如这个问题所示，尽管没有 Promise 存在。V8 如何恢复这个堆栈？它是否收集有关如何安排微任务的信息？如果是这样，什么可以防止内存泄漏？

我想在我得到它之前在画布上绘制一个图像dataURL(),但返回的数据就像是空的.

当我在控制台中检查它时,我看到A字符串中有很多:( "data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=")

当我尝试将画布附加到文档时,也没有绘制任何内容,并且我没有在控制台中抛出任何错误.

这里有什么问题 ？

这是我的代码:

var img = new Image();
img.src = "http://somerandomWebsite/picture.png";
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0); // this doesn't seem to work
var dataURL = canvas.toDataURL(); // this will give me a lot of "A"    
doSomething(dataURL);

此外,在快速刷新时,图像被正确地绘制到画布上,但我在控制台中有一条错误消息并且dataURL是空的.

Firefox中的消息是:"SecurityError:操作不安全." ,
在Chrome中,它是"未捕获的安全错误:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布." ,
在IE上,我只得到"SecurityError".

这是什么意思 ？

我正在为我认为D3可能适合的应用程序进行概念验证。由于我是D3的新手，所以我认为我应该从简单开始，逐步建立满足应用程序要求的方法。但是，对于这个库我认为应该是一件非常容易的事情，我似乎遇到了麻烦。我想在SVG上放置两个小圆圈，然后在它们之间绘制圆弧或曲线。根据文档，我相信arcTo最适合此操作，因为我知道起点和终点。为了我的一生，我无法画出弧线。每次都完美地绘制了圆圈。

var joints = [{x : 100, y : 200, r : 5},
    {x : 150, y : 150, r : 5}];
              
var svg = d3.select("svg");

svg.selectAll("circle")
  .data(joints)
  .enter().append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return d.r; });

svg.selectAll("path").append("path").arcTo(100,200,150,150,50)
  .attr("class", "link");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="800" />

我要么以错误的方式进行操作，要么不完全了解如何向SVG附加路径。有人可以指出我正确的方向吗？我还找不到很多arcTo的例子。谢谢！

随着OSX High-Sierra*的发布,Safari的一项新功能是,网站上的视频将不再自动播放,脚本也无法启动,就像在iOS上一样.作为一个用户,我喜欢这个功能,但作为开发人员,它在我面前提出了一个问题:我有一个包含视频的浏览器内HTML5游戏.除非用户更改其设置,否则视频不会再自动播放.这会扰乱游戏流程.

我的问题是,我可以以某种方式使用玩家与游戏的互动作为视频开始自动播放的触发器,即使所述活动没有直接链接到视频元素？

我不能使用jQuery或其他框架,因为我的雇主对我们的开发施加了限制.pixi.js是一个例外 - 在所有其他动画中 - 我们也用来在pixi容器中播放我们的视频.

_{*同样的限制也适用于移动Chrome.}

我正在编写一个脚本,根据光标位置左右变换调整图像.
还有一些CSS可以在悬停时缩放图像.

// JavaScript source code
var catchX = 0,
    catchY = 0,
    x = 0,
    y = 0,
    burn = 1 / 28;

function imageWatch() {
    x += (catchX - x) * burn;

    translate = 'translate(' + x + 'px, ' + y + 'px)';

    $('.image-area img').css({
        '-webit-transform': translate,
        '-moz-transform': translate,
        'transform': translate
    });

    window.requestAnimationFrame(imageWatch);
}

$(window).on('mousemove click', function (e) {

    var mouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
    catchX = (26 * mouseX) / 100;

}); …

我有一种情况，我将 blobURL 转换为 base64 dataURL，但只有当 url 是 blobURL 时我才想这样做。

那么有什么方法可以检查它是否是有效的blob url？

我的 blob 网址 - blob:http://192.168.0.136/85017e84-0f2d-4791-b563-240794abdcbf

下面的代码将文件保存到用户的磁盘上：

function handleSaveImg(event){
  const image = canvas.toDataURL();
  const saveImg = document.createElement('a');
  saveImg.href = image;
  saveImg.download= saveAs;
  saveImg.click();
}

if(saveMode){
  saveMode.addEventListener("click", handleSaveImg);
}

它使用<a>标签来保存一些数据（在我的例子中，是从 a 导出的图像<canvas>）。

但这会直接保存到磁盘，不会提示询问将文件保存在哪里，也不会询问以哪个名称保存。

我想强制显示“另存为”对话框，以便用户必须选择保存该文件的位置。
有什么办法吗？