相关疑难解决方法(0)

如何擦除画布而不擦除背景

我有一个帆布drawimage()作为背景.

我有一个橡皮擦工具,我希望能够擦除我绘制的内容,但不能删除画布中的图像.我知道可以将图像作为画布后面的单独元素放置,但这不是我想要的,因为我希望将画布中的内容保存为图像.

我的绘图功能在这里:

function draw (event) {     
    if (event == 'mousedown') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'mousemove') {
        context.lineTo(xEnd, yEnd);
    } else if (event == 'touchstart') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'touchmove') {
        context.lineTo(xEnd, yEnd);
    }
    context.lineJoin = "round";
    context.lineWidth = gadget_canvas.radius;
    context.stroke();                   
}
Run Code Online (Sandbox Code Playgroud)

如果我需要进一步解释,我会.

先感谢您.

javascript html5 canvas

4
推荐指数
1
解决办法
3168
查看次数

CanvasContext2D drawImage()问题[onload和CORS]

我想在我得到它之前在画布上绘制一个图像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);
Run Code Online (Sandbox Code Playgroud)

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

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

这是什么意思 ?

javascript canvas html5-canvas

4
推荐指数
1
解决办法
2957
查看次数

标签 统计

canvas ×2

javascript ×2

html5 ×1

html5-canvas ×1