使用 Sketch.js 清除的 Html5 画布绘图板不起作用答案

【问题标题】：Html5 canvas Drawing board using Sketch.js clearing not working使用 Sketch.js 清除的 Html5 画布绘图板不起作用
【发布时间】：2017-03-15 15:10:18
【问题描述】：

我正在尝试使用由 Sketch.js 支持的 Html5 Canvas 构建一个“在图像上书写”类型的 Cordova 移动应用程序，它的工作有一定的限制，比如我可以更改字母图像，我可以播放字母的声音，我甚至可以使用鼠标/触摸在画布上绘制线条，但是当我尝试擦除绘图时问题就开始了。它正在擦除绘图，但当我再次尝试绘图时又回来了。我找到了这个cleared sketch still on canvas in html5 并尝试过，但没有运气。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

<title>Shishutosh App</title>

<link rel="stylesheet" type="text/css" href="css/index.css" />

<link rel="stylesheet" type="text/css" title="default" href="css/page_transition.css">

<link rel="stylesheet" type="text/css" title="default" href="css/hatay_khori.css">

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/sketch.js"></script>

<script type="text/javascript" src="js/page.transition.js"></script>

<script type="text/javascript" src="js/playaudio.js"></script>

<script type="text/javascript">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady()
{
  var canvas2ImagePlugin = window.plugins.canvas2ImagePlugin;

  screen.lockOrientation('portrait');

}

function mySavingFunction(myCanvasId) {

canvas2ImagePlugin.saveImageDataToLibrary(
    function(msg){
        console.log(msg);
    },
    function(err){
        console.log(err);
    },
    myCanvasId
);
}

</script>

</head>

<body style="text-align:center;">

<div class="app" id="app" >

<div class="tools">

              <ul id="drop-nav">


              <li><a href="index.html" class="transition"><img src="home1.gif"></a>

              </li>

               <li><img src="rong_bachai.gif" />
                  <ul>

                    <li><a href="#colors_sketch" data-tool="marker" data-color="#f00" ><img src="red.png"> </a></li>
                    <li><a href="#colors_sketch" data-tool="marker" data-color="#ff0"><img src="yellow.png"></a></li>

                  </ul>
                </li>
                <li><img src="tuli_bachai.gif" />
                  <ul>
                    <li><a href="#colors_sketch" data-size="3" ><img src="choto_tuli.gif"></a></li>
                    <li><a href="#colors_sketch" data-size="5" ><img src="majhari_tuli.gif"></a></li>
                    <li><a href="#colors_sketch" data-size="10" ><img src="boro_tuli.gif"></a></li>

                  </ul>
                </li>
                <li><li><img src="eraser1.png" onclick="clearCanvas();">

                </li>

                <li><img src="download.png" onclick="mySavingFunction('colors_sketch');">

                </li>

        </ul>
  </div>

  <div class="main">

    <canvas id="colors_sketch" >

      <strong>[Your browser can not show this example.]</strong>

    </canvas>

  </div>

    <div id="statsPanel">

        <div id="scroller" style="width: 100%; height: 50px; margin: 0 auto;">

                <div class="innerScrollArea">

                    <ul>
                        <li><img src="image/Ka.jpg" width="50" height="50" onclick="Change_alphabet('image/Ka.jpg');playAudio('sound/ka.wav');"  /></li>

                        <li><img src="image/Kha.jpg" width="50" height="50" onclick="Change_alphabet('image/Kha.jpg');playAudio('sound/kha.wav');"  /></li>

                        <li><img src="image/Ga.jpg" width="50" height="50" onclick="Change_alphabet('image/Ga.jpg');playAudio('sound/ga.wav');"  /></li>

                        <li><img src="image/Gha.jpg" width="50" height="50" onclick="Change_alphabet('image/Gha.jpg');playAudio('sound/gha.wav');"  /></li>

                        <li><img src="ka.png" width="40" height="40" onclick="Change_alphabet('ka.png');playAudio('ka.mp3');"  /></li>


                  </ul>

                </div>

            </div>

            </div>

  </div>

  <script type="text/javascript" src="cordova.js"></script>

  <script type="text/javascript" src="js/scroller.js"></script>

  <script type="text/javascript">

  function Change_alphabet(img) {

            $('#colors_sketch').css("background-image", "url(" + img +     ")");

}

</script>

<script type="text/javascript">

var canvas = document.getElementById('colors_sketch');

var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth * .85;

canvas.height = window.innerHeight * .85;

function clearCanvas(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

</script>

<script type="text/javascript">

$(function() {

      $('#colors_sketch').sketch();
});

</script>

</body>

</html>

完成该应用程序需要一些帮助。详情请咨询我。

提前致谢。

【问题讨论】：

标签： html canvas

【解决方案1】：

在谷歌搜索了一段时间后，我在https://github.com/intridea/sketch.js/issues/3 的工作场所找到了有关该问题的答案

在那里我找到了以下代码 sn-p 对我有用。

$("#myClearButton").click(function(){
var canvas = document.getElementById('sketchCanvas');  
canvas.getContext('2d').clearRect(0,0,1920,2000);
$('#sketchCanvas').sketch('actions',[]);
});

谢谢大家。

【讨论】：