Question

我试图在一个页面中获得两个画布绘图板（与所有绘制和擦除功能分开），我无法找到技巧。

这是允许我只显示一个画布绘图板的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <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){
            clearCanvas();
        });

        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>  
</html>

有谁知道我怎么能解决这个问题？非常感谢你！

在一个页面中显示两个画布（分别具有相同的功能）

0 个答案: