Question

在画布上使用createElement作为绘制形状并遇到错误的临时位置。在转换为图像之前是否必须显示画布，或者创建画布并将其展平为图像的解决方案是什么？

var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");    
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd=convertCanvasToImage(ctx1)
console.log(asd)

function convertCanvasToImage(aaa) {
    var image = new Image();
    image.src = aaa[0].toDataURL("image/png");
    return image;
}

Answer 1

您的代码如下所示

var ctx  = document.createElement("canvas");

var ctx1 = ctx.getContext("2d");    

var asd  = convertCanvasToImage(ctx1)


function convertCanvasToImage(aaa) {

    something = aaa[0].toDataURL("image/png");

}

看看如何将上下文传递给函数，所以你真的在做

var ctx  = document.createElement("canvas");

var ctx1 = ctx.getContext("2d");    

var asd  = ctx1[0].toDataURL("image/png");

但是，上下文不是数组，toDataURL是canvas元素上的方法，而不是上下文，所以你应该这样做

var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");    
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd = convertCanvasToImage(ctx)
console.log(asd)

function convertCanvasToImage(aaa) {
    var image = new Image();
    image.src = aaa.toDataURL("image/png");
    return image;
}

将画布传递给函数的位置，并直接访问它的toDataURL方法这个参数也不是必需的，因为默认类型实际上是"image/png"，如果你不是png，你只需要传入一个参数。

FIDDLE

无法读取未定义的属性toDataURL

1 个答案: