如何使JavaScript画布(或400px乘400px绘图区域被调用)大于400x400?
我有一个1440p的屏幕,当我通过HTML文件运行我的JS文件时,画布左上角的400px到400px的小盒子并不奇怪。
有什么办法可以将画布扩展到指定的高度和宽度吗?
以下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>
因为Javascript可能会忽略CSS尝试在javascript和CSS中设置画布宽度和高度,例如,我希望我的画布宽度为650px,高度为750px,如果你的id被称为canvas并且还要添加canvas标签中的宽度和高度
canvas.width = 650px;
canvas.height = 750px;
你是通过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>
如果您正在为您的项目使用Processing.JS,我可能会提供帮助。我不确定它是否适用于常规JavaScript。不过值得一试
size(screenHeight, screenWidth);
如果你想自动检测屏幕尺寸,也可以这样
var screenSizeH = screen.height;
要么
var screenSizeW = screen.width;
但是,您可能会遇到问题。调整大小画布只调整画布大小,而不是内部任何内容。
解决这个问题的方法是将你拥有的一切都增加到一个比例。
var scaless = screenSize/400;
你必须将每一倍乘以比例,即如果它是一个正方形。你必须为高度和宽度制作2个刻度
canvas元素就像任何标准DOM对象一样。因此,您可以使用标准CSS调整画布大小:
<canvas />
<style>
canvas {
width: 100%;
min-height: 400px;
}
</style>
https://jsfiddle.net/z3pL9qp9/
画布很容易重塑;这是您需要重绘的内容,以确保您考虑了尺寸变化。