1

我正在尝试在画布上绘图，但我越向右，我的绘图就越偏移。

有人知道为什么吗？

我在下面包含了相关代码：

CSS

html,body {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.2);
}
#container {
    position:relative;
    width:700px;
    height:450px;
    background:#fff;
    overflow:hidden;
}
* {
    -webkit-user-select: none;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    background: #ccc;
    width: 500px;
    height: 200px;
}

HTML

<div id='adContainer'>
    <canvas></canvas>
</div>

Javascript

var ctx;
var can = $('canvas');

$(document).ready(function() {
    ctx = can[0].getContext('2d');
    ctx.strokeStyle = "rgba(255,0,0,1)";
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';

    can.on("touchstart", function(event) {
        event.preventDefault();
        var e = event.originalEvent;
        if(e.touches.length == 1) {
            var posX = e.touches[0].pageX;
            var posY = e.touches[0].pageY;
            ctx.moveTo(posX, posY);
        }
    });

    can.on("touchmove", function(event) {
        event.preventDefault();
        var e = event.originalEvent;
        if(e.touches.length == 1) {
            var posX = e.touches[0].pageX;
            var posY = e.touches[0].pageY;
            ctx.lineTo(posX, posY);
            ctx.stroke();
        }
    });
});

演示：http: //jsfiddle.net/8Wtf8/

4

1 回答 1

2

那是因为您使用 CSS 定义了画布的大小。

发生的情况是，当您没有使用其宽度和高度属性明确定义画布的大小时，画布默认大小为 300 x 150。

然后，在您的 CSS 中，您将画布元素（将其视为图像）拉伸到 500 像素等 - 画布的内容仍然是 300 x 150。

您需要在画布元素本身上设置宽度和高度：

<canvas width=500 height=200 id="myCanvas"></canvas>

并从 CSS 中删除定义：

canvas {
    position: absolute;
    top: 0;
    left: 0;
    background: #ccc;
    /*width: 500px;
    height: 200px;*/
}

另请注意，CSS 设置的背景不会成为画布内容的一部分。

于 2013-10-09T19:17:25.363 回答