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

时间:2016-04-20 07:32:43

标签: javascript jquery canvas html5-canvas

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

private void SetOldData()
    {
        int rowIndex = 0;
        if (ViewState["Curtbl"] != null)
        {
            DataTable dt = (DataTable)ViewState["Curtbl"];
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    TextBox txt1 = (TextBox)myGrid.Rows[rowIndex].Cells[0].FindControl("txt1");
                    DateTimeControl dt1 = (DateTimeControl)myGrid.Rows[rowIndex].Cells[1].FindControl("dt1");
                    DateTimeControl dt2 = (DateTimeControl)myGrid.Rows[rowIndex].Cells[2].FindControl("dt2");
                    TextBox txt2 = (TextBox)myGrid.Rows[rowIndex].Cells[3].FindControl("txt2");
                    TextBox txt3 = (TextBox)myGrid.Rows[rowIndex].Cells[4].FindControl("txt3");

                    txt1.Text = dt.Rows[i]["txt1"].ToString();
                    dt1.SelectedDate = dt.Rows[i]["dt1"];
                    dt2.SelectedDate = dt.Rows[i]["dt2"];
                    txt2.Text = dt.Rows[i]["txt2"].ToString();
                    txt3.Text = dt.Rows[i]["txt3"].ToString();

                    rowIndex++;
                }
            }
        }
    }

我想在下载之前将画布背景设置为dt1.SelectedDate = dt.Rows[i]["dt1"]; dt2.SelectedDate = dt.Rows[i]["dt2"]; ,因为在移动设备上,图像非常扭曲和黑色。有什么想法吗?

1 个答案:

答案 0 :(得分:5)

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

// 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/