Question

然后我使用大画布图像和createPattern for strokestyle我有滞后。有两种风格：铅笔和橡皮擦（橡皮擦是其他画布的风格createrPattern）

这是代码，然后我创建样式模式：

$("#eraser").click(function() {
    ctx.lineWidth = 5;
    ctx.globalCompositeOperation = "source-over"; 
    ctx.strokeStyle = ctx.createPattern(canvasBig, 'no-repeat');    
});

Answer 1

您的代码实际上有几个问题：
- canvasBig太大，在一些浏览器/设备上速度变慢甚至可能会中断 - 您正在每个按钮单击上创建一个模式：请注意，创建模式需要复制内容，因为它可能会随后更改。因此，这里正在进行大量无用的工作 - 各种图像/画布尺寸不匹配，因此擦除无法工作 - 我不明白为什么你需要3个画布用于绘制区域+备份，但我想你以后会使用大画布来做其他事情。最好的是在这个新功能之前已经使绘制/擦除工作正常。

所有这一切都在这里修复：

http://jsfiddle.net/y059fujd/4/

var img = new Image();
img.onload = function () {
    ctx.drawImage(img, 0, 0, img.width, img.height);
    ctxBackup.drawImage(img, 0, 0, 700, 500);
    imgPattern = ctx.createPattern(img, "no-repeat");
};

// 
$("#eraser").click(function () {
    ctx.lineWidth = 5;
    ctx.globalCompositeOperation = "source-over";
    ctx.strokeStyle = imgPattern;
});

来自createPattern的HTML5 Canvas strokeStyle

1 个答案: