Ширина и высота страницы заполнения холста

Question

Ширина и высота страницы заполнения холста

0

У меня была боль, пытаясь получить холст, чтобы заполнить всю страницу.

Я пробовал использовать...

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

Он заполнил ширину, но не высоту, а чертежная доска рисовала линии 1px, чего я не хочу.

При использовании 100% для ширины и высоты в CSS ширина масштабируется, а высота вырезается, при рисовании выглядит так, как если бы растровое изображение было масштабировано значительно больше в массе мс, и там было большое смещение на чертеже, которое, очевидно, не было Я хочу.

Любая помощь будет принята с благодарностью.

Полный код:

<!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>

Michael Schwartz 18 сен. 2013, в 09:23

Источник

Теги:

javascript

html

css

html5

canvas

1 ответ

Ещё вопросы

epistemex · Accepted Answer · 2013-09-18T04-32-00.000Z

Вы должны установить абсолютный размер в пикселях на элементе canvas, а не в 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.