http://jsbin.com/oMUtePo/1/edit
У меня была боль, пытаясь получить холст, чтобы заполнить всю страницу.
Я пробовал использовать...
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="/jquery.min.js"></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>
Вы должны установить абсолютный размер в пикселях на элементе 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);