如何在下载之前设置画布背景

Question

我正在创建一个绘图应用程序,并使用此功能下载画布图像.

function download() {
    var dt = canvas.toDataURL('image/png');
    this.href = dt;
};

我想white在下载前设置画布背景,因为在移动设备上,图像非常扭曲和黑色.有任何想法吗？

Answer 1

您可能希望在画布的实际内容下方绘制整个画布大小的白色矩形.

// get the canvas 2d context
var ctx = canvas.getContext('2d');

// set the ctx to draw beneath your current content
ctx.globalCompositeOperation = 'destination-over';

// set the fill color to white
ctx.fillStyle = 'white';

// apply fill starting from point (0,0) to point (canvas.width,canvas.height)
// these two points are the top left and the bottom right of the canvas
ctx.fillRect(0, 0, canvas.width, canvas.height);

在生成toDataUrl()流之前,必须应用这些行.

想法取自:http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/