小编nae*_*luh的帖子

我想知道有没有人知道怎么做

canvas.toDataURL("image/png"); 

作品？我想更好地理解，因为有时它似乎真的让我的电脑变慢了。有没有办法在之前或之后优化 base64 图像以获得更好的性能？

function base64(url) {
    var dataURL;
    var img = new Image(),
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        src = url; 
    img.crossOrigin = "Anonymous";
    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        preload(dataURL);
        canvas = null;
    };
    img.src = url;
}

基本上这是我的功能，但我想看看是否有办法让这个过程表现得更好，或者是否有替代 canvas.toDataURL('image/png');

谢谢

我有一个画布，正在绘制图像并进行剪辑以创建图像被显示的效果。我的代码工作正常，我尝试使用 debouce 方法和 rAF 来提高画布渲染性能，但我只看到了很小的收益（如果有的话）。

我怀疑我迭代 x 和 y 坐标数组的方式可能是问题所在。当将数组放入控制台时，其速度似乎与屏幕上出现的圆圈相同。

这是重绘函数：

  function redraw(mouse) {
     m.push(mouse);
     m.forEach(function (a) {
        ctx.drawImage(img, 0, 0);
        ctx.beginPath();
        ctx.rect(0, 0, 500, 500);
        ctx.arc(a.x, a.y, 70, 0, Math.PI * 2, true);
        ctx.clip();
        ctx.fillRect(0, 0, 500, 500)
      })
    }

我想我正在寻找的是一些加快我的代码速度的建议，以便圆圈的渲染看起来更像绘图。

这是工作演示 -> http://jsfiddle.net/naeluh/4h7GR/