console 命令行工具 X clear
console
<html><head><meta http-equiv="X-UA-Compatible" content="chrome=1">  
  
    <style>
        #thecanvas { background-color: white; }
    </style>
<script>
    window.onload = function () {
        var canvas = document.getElementById("thecanvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth = 6.0;
        ctx.strokeStyle = "black";//线条的颜色
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        canvas.addEventListener('touchstart', function (event) {//触摸点按下事件
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                ctx.beginPath();
                ctx.moveTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
                canvas.addEventListener('touchmove', function (event) {//手机拖动触摸点事件
                    var touche = event.targetTouches[0];
                    ctx.lineTo(touche.clientX - canvas.offsetLeft, touche.clientY - canvas.offsetTop);
                    ctx.stroke();
                }, false)
                canvas.addEventListener('touchend', function (event) {//手机离开屏幕的事件
                    ctx.closePath();

                }, false)

            }
        }, false)
        var saveButton = document.getElementById("saveImageBtn");
        bindButtonEvent(saveButton, "click", saveImageInfo);
    };
    function bindButtonEvent(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else {
            element.attachEvent('on' + type, handler);
        }
    }

    function saveImageInfo() {
        var mycanvas = document.getElementById("thecanvas");
        var image = mycanvas.toDataURL("image/png");
        var w = window.open('about:blank', 'image from canvas');
        w.document.write("<img style='background-color:white;' src='" + image + "' alt='from canvas'/>");
    }

    function saveAsLocalImage() {
        var myCanvas = document.getElementById("thecanvas");
        // here is the most important part because if you dont replace you will get a DOM 18 exception.  
        // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
        var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        window.location.href = image; // it will save locally  
    }
    function redraw() {
        var oC = document.getElementById('thecanvas');
        oC.width = oC.width;
        // Clears the canvas   context.strokeStyle = "#df4b26";             context.lineJoin = "round"; context.lineWidth = 5;
        for (var i = 0; i < clickX.length; i++) {
            context.beginPath();
            if (clickDrag[i] && i) {
                //当是拖动而且i!=0时，从上一个点开始画线。 
                context.moveTo(clickX[i - 1], clickY[i - 1]);
            }
            else {
                context.moveTo(clickX[i] - 1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]); context.closePath(); context.stroke();
        }
    }
        </script>  
</head>  
<body bgcolor="#E6E6FA">  
    <div>  
        <canvas width="600" height="900" id="thecanvas"></canvas>  
        <button id="saveImageBtn">Save Image</button>  
        <button id="QK" onclick="redraw()">redraw</button>
    </div>  
  
  </body></html>