Question

我按照本教程制作了一个非常基本的绘画应用程序：http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

我在第一步停了下来（因为这是我想要的全部），除了我不能像教程网站上显示的第一个例子那样擦除。我想在将名为“redraw”的javascript函数链接到Erase按钮时犯了一个错误。

这是我的代码：

   <head>
       <title>TEST PAINTING</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script>
        $( document ).ready(function() {
        var canvasDiv = document.getElementById('canvasDiv');
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', "500");
        canvas.setAttribute('height', "200");
        canvas.setAttribute('id', 'canvas');
        canvasDiv.appendChild(canvas);
        if(typeof G_vmlCanvasManager != 'undefined') {
            canvas = G_vmlCanvasManager.initElement(canvas);
        }
        context = canvas.getContext("2d");

        //
        $('#canvas').mousedown(function(e){
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;

            paint = true;
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
            redraw();
        });

        $('#canvas').mousemove(function(e){
            if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
            }
        });       

        $('#canvas').mouseup(function(e){
            paint = false;

        });

        $('#canvas').mouseleave(function(e){
            paint = false;
        });

        $('#clearCanvasSimple').click(function(e){
            clearCanvs();
        });

        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();
        var paint;

        function addClick(x, y, dragging)
        {
            clickX.push(x);
            clickY.push(y);
            clickDrag.push(dragging);
        }

        function redraw()
        {
            context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

            context.strokeStyle = "#333";
            context.lineJoin = "round";
            context.lineWidth = 8;

            for(var i=0; i < clickX.length; i++) {        
                context.beginPath();
                if(clickDrag[i] && i){
                    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();
            }
        }

        function clearCanvas()
        {
            clickX = new Array();
            clickY = new Array();
            clickDrag = new Array();
            context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
        }

}); 
        </script>
   </head>
   <body>
        <div><button id="clearCanvasSimple" href="javascript:void(0)" onClick="clearCanvas()" type="button">Erase</button></div>
        <div class="cadre" id="canvasDiv"></div>        
   </body>

有谁知道如何让这个“擦除”按钮工作？

谢谢！

Answer 1

您已将重绘按钮设置为仅重新重新绘制代码。

它应该做这样的事情：

function clearCanvas()
{
    clickX = new Array();
    clickY = new Array();
    clickDrag = new Array();
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
});

我们清除当前点，然后清除画布。

在redraw函数之后放置clearCanvas函数，并添加以下jquery来注册按钮上的点击（全部在ready函数的旁边）。

$('#clearCanvasSimple').click(function(e){
    clearCanvas();
});

全部擦除按钮（使用画布绘制应用程序）

1 个答案: