0

ユーザーがマウスで HTML5 キャンバスに描画できるようにする JavaScript を作成しました (MS ペイントに似ています)。

現在、2 つの問題があります。

  1. 描画機能は、HTML5 キャンバス要素が Web ページの左上隅 (0, 0) に配置されている場合にのみ機能します。それ以外の場合はまったく機能しないか、描画が中心からずれています。

  2. 描画を消去できません。描画を消去すると消去されますが、再度描画を開始するとすぐに元に戻ります。

私のコードは以下の通りです：

HTML キャンバス

<canvas id="can1" width="500" height="500"></canvas>1

キャンバス描画用 JavaScript

// Variables
var x1;
var y1;
var isPressed = false;
var myCanvas;
var myContext;

function startCanvas() {

    // Canvas stuff
    myCanvas = document.getElementById("can1");
    myContext = myCanvas.getContext("2d");

    // Specify a black background, and white lines that are 3 pixels thick.
    myContext.fillStyle = '#fff';
    myContext.strokeStyle = '#fff';
    myContext.fillRect(0, 0, 500, 500);
    myContext.lineWidth = 3;
    myContext.fill();
}

function functionMouseDown(e) {
    // Get coordinates
    x1 = e.clientX
    y1 = e.clientY;

    isPressed = true;
}

function functionMouseMove(e) {
    // If mouse is down and moved start drawing line
    if (isPressed == true) {
        drawLine(e);
    }
}

function functionMouseUp() {
    // Stop drawing line
    isPressed = false;
    //myContext.closePath();
    //myContext.stroke();
}

function drawLine(e) {
    // Draw line
    var x = e.clientX;
    var y = e.clientY;

    myContext.strokeStyle = '#cc0000';
    myContext.lineWidth = 1;
    myContext.moveTo(x1, y1);
    myContext.lineTo(x, y);
    myContext.stroke();

    // Set start coordinates to current coordinates
    x1 = x;
    y1 = y;
}

キャンバスを消去するために使用する JavaScript:

myContext.clearRect(0, 0, 500, 500);
4

2 に答える 2

0

これを達成するために次の関数を使用します

function relMouseCoords(event){/*needs fixing for general case*/
    var totalOffsetX = 0
    var totalOffsetY = 0
    var canvasX = 0
    var canvasY = 0
    var currentElement = this

    do{
        totalOffsetX += currentElement.offsetLeft
        totalOffsetY += currentElement.offsetTop
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX
    canvasY = event.pageY - totalOffsetY

    return {x:canvasX, y:canvasY}
}

HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

それから

var cord = e.target.relMouseCoords(e);
x1 = cord.x; 
y1 = cord.y;
...
var cord = e.target.relMouseCoords(e);
var x = cord.x;
var y =cord.y;

http://jsfiddle.net/mowglisanu/u3rvT/1/

于 2012-12-06T03:08:15.500 に答える
0

最も簡単な解決策は、myCanvas.offsetLeft と myCanvas.offsetTop を使用してキャンバスのオフセットを設定することです。

于 2012-12-06T06:08:23.733 に答える