在HTML5 canvas上用鼠标点击两次绘制一条线？ [英] Draw a line with two mouse clicks on HTML5 canvas?

问题描述

如何在画布上用两次鼠标点击绘制一条线？

How do I draw a line with two mouse clicks on canvas?

推荐答案

代码很简单，以获得良好的基础：

The code is quite simple, but you have to get a good foundation:

演示： http ：//jsfiddle.net/NpDdt/10/

JavaScript ：

var clicks = 0;
var lastClick = [0, 0];

document.getElementById('canvas').addEventListener('click', drawLine, false);

function getCursorPosition(e) {
    var x;
    var y;

    if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;
        y = e.pageY;
    } else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return [x, y];
}

function drawLine(e) {
    context = this.getContext('2d');

    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    if (clicks != 1) {
        clicks++;
    } else {
        context.beginPath();
        context.moveTo(lastClick[0], lastClick[1]);
        context.lineTo(x, y, 6);

        context.strokeStyle = '#000000';
        context.stroke();

        clicks = 0;
    }

    lastClick = [x, y];
};

这篇关于在HTML5 canvas上用鼠标点击两次绘制一条线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！