如何使JavaScript画布(或者400px x 400px的绘图区域被称为)大于400x400?
我有一个1440p的屏幕,当我通过HTML文件运行我的JS文件时,画布在左上角是一个400px乘400px的小方框,这并不奇怪。
有什么方法可以将画布扩展到指定的高度和宽度吗?
发布于 2016-09-19 06:09:48
下面的jsfiddle演示了如何调整画布的大小。https://jsfiddle.net/intrinsica/msj0cwx3/
(function() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
// Event handler to resize the canvas when the document view is changed
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Redraw everything after resizing the window
drawStuff();
}
resizeCanvas();
function drawStuff() {
// Do drawing here
context.strokeRect(10,10, 230,100);
context.font = '16px serif';
context.fillText('The canvas is the blue', 30, 30);
context.fillText('background color seen here.', 30, 50);
context.fillText('It will resize if the window', 30, 70);
context.fillText('size is adjusted.', 30, 90);
}
})();
* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas {
background: #77f; /* to show the canvas bounds */
display:block; /* to remove the scrollbars */
}
<canvas id="canvas"></canvas>
发布于 2016-09-19 06:10:53
您是否通过HTML声明了一个画布?如果是这样的话,您可以使用:
<canvas id="myCanvas" width="1400" height="900"></canvas>
如果要通过Javascript更改大小,可以使用:
<script type="text/javascript">
document.getElementById('myCanvas').height = 800;
document.getElementById('myCanvas').width = window.innerWidth;
</script>
发布于 2016-09-19 06:15:22
因为javascript可能会忽略CSS尝试在Javascript & CSS中设置画布的宽度和高度,例如,我希望我的画布的宽度为650px,高度为750px (如果您的id被称为canvas ),并在canvas标记中添加width和height
canvas.width = 650px;
canvas.height = 750px;
https://stackoverflow.com/questions/39563033
复制相似问题