如何将JavaScript画布(或称为400x400绘图区域)扩大到超过400x400?
我有一个1440p的屏幕,当我通过HTML文件运行我的JS文件时,画布不出所料地是一个位于左上角的小型400x400的框。
有没有什么方法可以将画布扩展到指定的高度和宽度?
如何将JavaScript画布(或称为400x400绘图区域)扩大到超过400x400?
我有一个1440p的屏幕,当我通过HTML文件运行我的JS文件时,画布不出所料地是一个位于左上角的小型400x400的框。
有没有什么方法可以将画布扩展到指定的高度和宽度?
(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>
<canvas id="myCanvas" width="1400" height="900"></canvas>
<script type="text/javascript">
document.getElementById('myCanvas').height = 800;
document.getElementById('myCanvas').width = window.innerWidth;
</script>
由于Javascript可能会忽略CSS,因此请尝试在Javascript和CSS中设置画布的宽度和高度。例如,如果您的id叫做canvas,并且还要在canvas标签中添加宽度和高度,那么我想让我的画布宽度为650px,高度为750px。
canvas.width = 650px;
canvas.height = 750px;
Canvas元素就像任何标准的DOM对象一样。因此,您可以使用标准CSS调整画布的大小:
<canvas />
<style>
canvas {
width: 100%;
min-height: 400px;
}
</style>
https://jsfiddle.net/z3pL9qp9/
画布很容易改变形状;但你需要重新绘制内容,以确保你已经考虑到了尺寸的变化。
size(screenHeight, screenWidth);
var screenSizeH = screen.height;
或者
var screenSizeW = screen.width;
你可能会遇到问题。因为调整画布大小只是调整画布本身,而不是其中的任何内容。
解决这个问题的方法是将所有内容乘以一个比例。
var scaless = screenSize/400;
如果是正方形,您需要将每个尺寸都乘以比例尺。对于高度和宽度,您需要分别制作两个比例尺。