0

http://jsbin.com/oMUtePo/1/edit

我一直在努力让画布填满整个页面。

我尝试使用...

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

它填充了宽度，但没有填充高度，并且绘图板正在绘制 1px 线，这不是我想要的。

当在 CSS 中对宽度和高度使用 100% 时，宽度会被缩放，并且高度会被削减，在绘制时，它看起来好像光栅图像在 ms 绘制中被缩放得明显更大，并且 onmousedown 绘图上有很大的偏移，这显然不是什么我想。

任何帮助将不胜感激。

完整代码：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Drawing Board</title>
<style>
* {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
}

#myCanvas {
    cursor: crosshair;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript">
window.onload = function() {
    var myCanvas = document.getElementById("myCanvas");
    var curColor = $('#selectColor option:selected').val();
    var ctx = myCanvas.getContext("2d");
    ctx.fillStyle="#000";
    ctx.fillRect(0,0,500,500);

    if(myCanvas){
        var isDown = false;
        var canvasX, canvasY;
        ctx.lineWidth = 5;

        $(myCanvas)
        .mousedown(function(e){
            isDown = true;
            ctx.beginPath();
            canvasX = e.pageX - myCanvas.offsetLeft;
            canvasY = e.pageY - myCanvas.offsetTop;
            ctx.moveTo(canvasX, canvasY);
        })
        .mousemove(function(e){
            if(isDown !== false) {
                canvasX = e.pageX - myCanvas.offsetLeft;
                canvasY = e.pageY - myCanvas.offsetTop;
                ctx.lineTo(canvasX, canvasY);
                ctx.strokeStyle = "white";
                ctx.stroke();
            }
        })
        .mouseup(function(e){
            isDown = false;
            ctx.closePath();
        });
    }
};
</script>
</head>
<body>
    <canvas id="myCanvas">
        Sorry, your browser does not support HTML5 canvas technology.
    </canvas>
</body>
</html>
4

1 回答 1

3

您必须在画布元素上设置绝对大小（以像素为单位），而不是像在演示中那样使用 CSS，因此首先从 CSS 规则中删除以下行：

#myCanvas {
    cursor: crosshair;
    position: absolute;
    /*width: 100%; Remove these */
    /*height: 100%;*/
}

然后将此添加到您的代码中 - 您需要使用clientWidth/Height该window对象。

myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;

var ctx = myCanvas.getContext("2d");
ctx.fillStyle="#000";
ctx.fillRect(0,0, myCanvas.width, myCanvas.height);

您修改后的 JSBIN。

于 2013-09-18T07:16:32.410 回答