画布或画布上的文本在按钮单击时消失答案

【问题标题】：Canvas or text on canvas disappears on button click画布或画布上的文本在按钮单击时消失
【发布时间】：2017-05-15 15:40:05
【问题描述】：

在按钮上单击画布或画布上的文本消失，我不确定。

这是用于填充画布的脚本

<script>
        window.onload = function () {
            $("#show_img_btn").on("click", function () {
                var can = document.createElement("canvas");
                can.width = 500;
                can.height = 500;
                var cvs = can.getContext('2d');
                cvs.font = "20px Arial";
                var text = $("#the_text").text();
                var text2 = $("#div_position").text();
                cvs.fillText(text, 10, 50);
                cvs.fillText(text2, 20, 70);
                var img = document.createElement("img");
                img.src = can.toDataURL();
                $("#show_img_here").append(img);
            });
        };
</script>

这是我要转换为图像的文本

<div id="the_text">
    &nbsp;<asp:Label ID="lblfirstname" runat="server" Text="First Name" Font-Names="Arial" Font-Bold="true"></asp:Label>
    <asp:Label ID="lbllastname" runat="server" Text="Last Name" Font-Names="Arial" Font-Bold="true"></asp:Label>
    <br />
    <br />
</div>
<div id="div_position" runat="server">
    <asp:Label ID="lblposition" runat="server" Font-Names="Arial" ForeColor="#0099FF" Text="Position"></asp:Label>
</div>
<div id="show_img_here" runat="server">
</div>

这是我单击以转换为图像的按钮

 <asp:Button ID="show_img_btn" runat="server" Text="Create Image" />

【问题讨论】：

你想做什么？

标签： javascript jquery html canvas

【解决方案1】：

把函数名改成DisplayImage()

$("#show_img_btn").on("click", function DisplayImage()

函数结束时返回false

return false;

在按钮点击事件上

<input id="show_img_btn" type="button" value="Create Image" onclick="DisplayImage();" />

【讨论】：