4

マウスをクリックしてドラッグして、キャンバス上に描画しようとしています。私の問題は、線の品質が非常に悪いという事実を除けば(境界線をもっとはっきりさせたい)、これが0,0の場合にのみマウスの位置を尊重することです。マウスを下隅に移動すると、キャンバスの中央にいるときと同じように、線はそこからの距離を増やします。線はすでにそこから出ています。コードはhttp://jsfiddle.net/ajTkP/12/にあります。

ここにも投稿します：

var MDown = false;
var Color = 'blue';

var Canvas = document.getElementById('canvas');
var Context = Canvas.getContext('2d');

Canvas.onselectstart = function() { return false; };
Canvas.unselectable = "on";
Canvas.style.MozUserSelect = "none";

Canvas.onmousedown = function(e) {
    MDown = true;
    Context.strokeStyle = Color;
    Context.lineWidth = 3;
    Context.lineCap = 'round';
    Context.beginPath();
    Context.moveTo(e.pageX - Position(Canvas).left, e.pageY - 5);
}

Canvas.onmouseup = function() { MDown = false; };

Canvas.onmousemove = function(e) { 
    if (MDown) {
        Context.lineTo(e.pageX - Position(Canvas).left, e.pageY - 5);
        Context.stroke();
    }
}

function Position(el) {
    var position = {left: 0, top: 0};
    if (el) {
        if (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
            position.left += el.offsetLeft;
            position.top += el.offsetTop;
        }
    }
    return position;
}

ご協力いただきありがとうございます！

4

2 に答える 2

9

width明示的でheightキャンバス上に設定する必要があります。キャンバスのデフォルトの寸法は、幅300、高さ150です（仕様はこちらをご覧ください）。CSSを使用して幅と高さを設定することで、キャンバスを引き伸ばすことができます。

どちらか：

<canvas id="canvas" width="300" height="200"></canvas>

またはJavaScriptで幅/高さを設定します。

canvas.width = 300;
canvas.height = 200;

更新されたjsfiddleを参照してください：http：//jsfiddle.net/ajTkP/13/

于 2012-06-16T01:54:44.117 に答える
1

キャンバスの高さと幅については、jimr が私を圧倒したようです。

ただし、線の質が悪いのは、線の引き方によるものです。すべてのonmousemove イベントで呼び出しstroke()ていることがわかります。when you から when youまでの行のパスを追跡していることに注意してください。したがって、基本的に同じ行を複数回（マウスが動くたびに）ストロークしています。これが、予想される滑らかなアンチエイリアスされた線ではなく、エイリアス化された (ブロック状に見える) 線を提供するものです。beginPath()closePath()

于 2012-06-16T02:04:32.333 に答える