0

私はこのコードの塊を手に入れました。これにより、思い通りに水平線を描くことができます。問題は、それを使用すると問題なく描画されますが、ブラウザウィンドウを引き伸ばすと、線の位置が変わることです。それは右の中にラップされているという事実と関係があると思いますか？私はそれをやろうとしましたが、うまくいきませんでした。レイアウトに合わせてこれらの行が本当に必要です。

<canvas id="myCanvas" width="1250" height="120"></canvas>

  <script>

    var canvas = $("#myCanvas")[0];
    var c = canvas.getContext("2d");
    var amount = 0;
    var startX = 164;
    var startY = 120;
    var endX = 1094;
    var endY = 120;

    setTimeout(function() {
    var interval = setInterval(function() {
        amount += 0.005; // change to alter duration
        if (amount > 1) {
            amount = 1;
            clearInterval(interval);
        }
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.lineWidth=1;
        c.strokeStyle="#707070";
        c.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        c.stroke();
    }, 0);

}, 3000);

</script>
4

1 に答える 1

3

キャンバスのサイズが変更された場合、キャンバスの描画サイズは、表示されるサイトに自動的に適応されません。あなたはそれを自分でしなければなりません。

私は通常、キャンバス ドロワーの初期化ルーチンで次のようなことを行います。

this.canvas = canvas;
this.context = this.canvas.getContext("2d");
var _this = this;
var setDim = function() {
    _this.w = _this.canvas.clientWidth;
    _this.h = _this.canvas.clientHeight;
    _this.canvas.width = _this.w;
    _this.canvas.height = _this.h;
    _this.dimChanged = true;
    _this.draw();
};
setDim();
$(window).resize(setDim);
于 2012-09-27T15:49:29.257 に答える