Question

我试图建立一个脚本在动态添加的画布上绘制线条，因此页面上可以有任意数量的画布。到目前为止，这是该代码的脚本，但单击时未显示线条或图形。我认为问题出在drawLine函数中。画布将通过第二个脚本添加，该脚本还添加了其他元素。

<script type="text/javascript">
// Variables to keep track of the mouse position and left-button status 
var mouseX,mouseY,mouseDown=0;

// Variables to keep track of the touch position
var touchX,touchY;

function drawLine(ctx,x,y,size) {

    // If lastX is not set, set lastX and lastY to the current position 
    if (lastX==-1) {
        lastX=x;
    lastY=y;
    }

    // Let's use black by setting RGB values to 0, and 255 alpha (completely opaque)
    r=0; g=0; b=0; a=255;

    // Select a fill style
    ctx.strokeStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";

    // Set the line "cap" style to round, so lines at different angles can join into each other
    ctx.lineCap = "round";
    //ctx.lineJoin = "round";


    // Draw a filled line
    ctx.beginPath();

// First, move to the old (previous) position
ctx.moveTo(lastX,lastY);

// Now draw a line to the current touch/pointer position
ctx.lineTo(x,y);

    // Set the line thickness and draw the line
    ctx.lineWidth = size;
    ctx.stroke();

    ctx.closePath();

// Update the last position to reference the current position
lastX=x;
lastY=y;
}

// Get the current mouse position relative to the top-left of the canvas
function getMousePos(e) {
    if (!e)
        var e = event;

    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
 }

// Get the touch position relative to the top-left of the canvas
// When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
// but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
// "target.offsetTop" to get the correct values in relation to the top left of the canvas.
function getTouchPos(e) {
    if (!e)
        var e = event;

    if(e.touches) {
        if (e.touches.length == 1) { // Only deal with one finger
            var touch = e.touches[0]; // Get the information for finger #1
            touchX=touch.pageX-touch.target.offsetLeft;
            touchY=touch.pageY-touch.target.offsetTop;
        }
    }
}

// Keep track of the mouse button being released
function sketchpad_mouseUp() {
    mouseDown=0;
}


// Set-up an individual sketchpad and add our event handlers
// Use the "this" reference to make sure variables and functions are specific to each 
// specific sketchpad created in the "init()" function below.
function sketchpad(my_sketchpad) {

    // Get the specific canvas element from the HTML document passed
    this.canvas = document.getElementById(my_sketchpad);

    // If the browser supports the canvas tag, get the 2d drawing context for this canvas,
    // and also store it with the canvas as "ctx" for convenience
    if (this.canvas.getContext)
        this.ctx = this.canvas.getContext('2d');


    // Declare some functions associated with a particular sketchpad
    // We will attach these to the canvas as event handlers later
    // Note that the sketcphad_mouseUp function is not included here, since it's not 
    // specific to a certain canvas - we're listening to the entire window for mouseup
    // events.

    // Clear the canvas context using the canvas width and height
    this.clearCanvas = function() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    // Draw something when a touch start is detected
    this.sketchpad_touchStart = function() {
        // Update the touch co-ordinates
        getTouchPos();

        drawLine(this.ctx,touchX,touchY,12);

        // Prevents an additional mousedown event being triggered
        event.preventDefault();
    }

    // Draw something and prevent the default scrolling when touch movement is detected
    this.sketchpad_touchMove = function(e) { 
        // Update the touch co-ordinates
        getTouchPos(e);

        // During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition.
        drawLine(this.ctx,touchX,touchY,12); 

        // Prevent a scrolling action as a result of this touchmove triggering.
        event.preventDefault();
    }

    // Keep track of the mouse button being pressed and draw a dot at current location
    this.sketchpad_mouseDown = function() {
        mouseDown=1;
        drawLine(this.ctx,mouseX,mouseY,12);
    }

    // Keep track of the mouse position and draw a dot if mouse button is currently pressed
    this.sketchpad_mouseMove = function(e) { 
        // Update the mouse co-ordinates when moved
        getMousePos(e);

        // Draw a dot if the mouse button is currently being pressed
        if (mouseDown==1) {
            drawLine(this.ctx,mouseX,mouseY,12);
        }
    }

// Add event handlers
    // Check that we have a valid context to draw on/with before adding event handlers
    if (this.ctx) {
        // React to mouse events on the canvas, and mouseup on the entire document
        this.canvas.addEventListener('mousedown', this.sketchpad_mouseDown.bind(this), false);
        this.canvas.addEventListener('mousemove', this.sketchpad_mouseMove.bind(this), false);

        // React to touch events on the canvas
        this.canvas.addEventListener('touchstart', this.sketchpad_touchStart.bind(this), false);
        this.canvas.addEventListener('touchmove', this.sketchpad_touchMove.bind(this), false);
    }

}

// Create two sketchpads when the page loads, using our canvas elements called sketchpad1 and sketchpad2
function init() {
    sketch1 = new sketchpad('sketchpad1');
    //sketch2 = new sketchpad('sketchpad2');

    // Since we are listening to the entire window for the mouseup, it only needs to be done once per page,
    // and not once per canvas
    window.addEventListener('mouseup', sketchpad_mouseUp, false);
}

Answer 1

您的麻烦与画布的添加方式无关。

var touchX,touchY;

应该是：

var touchX,touchY,lastX=-1,lastY=-1;

在动态添加的画布上绘制线条

1 个答案: