par*_*kar 4 javascript css jquery html5
我有一个程序,用于在鼠标拖动时在画布上移动对象.但是,我希望画布适合屏幕.我不知道如何实现这一目标.如果我将画布设为"width:100%; height:100%;",则该对象超出范围.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 0,0);
};
img.src = "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg";
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;
var isDragging=false;
// functions to handle mouseup, mousedown, mousemove, mouseout events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
如何让帆布100%适合屏幕？
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: ivory;
}
#canvas {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid red;
}
</style>
<script>
$(function () {
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
img.src =
"http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg";
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/*var canvasWidth=canvas.width;
var canvasHeight=canvas.height;*/
var isDragging = false;
// functions to handle mouseup, mousedown, mousemove, mouseout events
$("#canvas").mousedown(function (e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
handleMouseOut(e);
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
您的尝试无效，因为您没有为画布的父级（在本例中为 元素）指定width和。此外，默认情况下，元素具有填充或边距。所以你也应该中和它。heightbodybody
基于您的尝试的 CSS 解决方案：
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#canvas {
width: 100%;
height: 100%;
}
替代 CSS 解决方案
您还可以将画布设置position为fixed或absolute（视情况而定）。如果您使用fixed，它将取决于window. 如果您使用absolute，请确保其所有祖先都不必position: relative使其依赖，window除非其最近的祖先与position: relative相对于window。
#canvas {
position: fixed; /* absolute */
top: 0;
left: 0;
width: 100vw; /* 100% */
height: 100vh; /* 100% */
}
Javascript 解决方案
如果使用 jQuery：
var $canvas = $('#canvas'),
$window = $(window);
$canvas.attr({
width: $window.width(),
height: $window.height()
});
// Or use $canvas.css({...});
如果使用原生 JavaScript：
var canvas = document.getElementById('canvas');
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
// Or use canvas.style.width = ... and canvas.style.height = ...
笔记
如果您正在使用 CSS 解决方案，您可能也想添加box-sizing: border-box到您的#canvas元素中，否则它会稍微脱离屏幕呈现。
为什么？阅读：
| 归档时间： |
|
| 查看次数： |
4697 次 |
| 最近记录： |