Question

我正在尝试绘制画布，但是我越往右，我的绘图就越偏移。

任何人都知道为什么？

我在下面列出了相关代码：

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/

Answer 1

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

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

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

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

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

并从CSS中删除定义：

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

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

画布中的绘图变得偏移

1 个答案: