Canvas清除后鼠标悬停旧图像复现问题求助

你直接用context.clearRect()清除画布，但sketch.js库内部会保存绘制的路径历史数据，鼠标悬停时库会基于这些历史数据重新渲染内容，导致已清除的图像复现。

1. 调用sketch.js内置的清除方法 #

替换EraseCanvas函数，使用sketch.js提供的clear方法，彻底清除库内部的历史记录：

function EraseCanvas() {
    document.getElementById('SignatureField').value = '';
    // 获取sketch实例并执行清除操作
    $('#colors_sketch').sketch('clear');
}

2. 避免重复初始化sketch实例 #

当前代码每次点击Draw按钮都会重新初始化sketch，容易造成状态混乱，改成只初始化一次：

$(function () {
    // 提前初始化sketch，仅执行一次
    $('[id*=colors_sketch]').sketch();
    
    $('[id*=btnDraw]').on('click', function () {
        $('[id*=dvSignature]').attr('style', 'display:block;');
        $(".tools a").eq(0).attr("style", "color:#000");
    });

    $(".tools a").click(function () {
        $(".tools a").removeAttr("style");
        $(this).attr("style", "color:#000");
    });
});

3. 移除无用依赖 #

你同时引入了sketch.js和signature_pad.js，但当前功能只用到sketch.js，移除多余库可避免潜在冲突：

<!-- 移除这个未使用的库 -->
<!-- <script type="text/javascript" src=https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.4/signature_pad.min.js></script> -->

JavaScript代码 #

function EraseCanvas() {
    document.getElementById('SignatureField').value = '';
    $('#colors_sketch').sketch('clear');
}

$(function () {
    $('[id*=colors_sketch]').sketch();
    
    $('[id*=btnDraw]').on('click', function () {
        $('[id*=dvSignature]').attr('style', 'display:block;');
        $(".tools a").eq(0).attr("style", "color:#000");
    });

    $(".tools a").click(function () {
        $(".tools a").removeAttr("style");
        $(this).attr("style", "color:#000");
    });
});

HTML代码 #

<input id="btnDraw" type="button" value="Draw" /><br/>
<input id="btnClear" type="button" value="Clear" onclick="EraseCanvas()" />
<div id="dvSignature" style="display: none;text-align:center">
    <canvas id="colors_sketch" width="500" height="150" style="border: 1px solid #ccc;"></canvas>
</div>

<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>

内容的提问来源于stack exchange，提问作者Anjali