Javascript 动态调整画布大小；保持图像在原位
是否有一种方法可以创建一个动态画布，该画布的尺寸与它所在的Javascript 动态调整画布大小；保持图像在原位,javascript,html,css,html5-canvas,Javascript,Html,Css,Html5 Canvas,是否有一种方法可以创建一个动态画布，该画布的尺寸与它所在的相同 我在画布的CSS中尝试了高度：100%，宽度：100%。我的画布总是像div一样清晰，但是里面的内容可以根据需要进行缩放 因此，我想知道一种调整画布大小的方法，但即使我在移动设备上更改风景，也要保持图像的准确位置 要调整画布大小，可以使用HTML5画布标记。下面是一个需要可调整大小画布的应用程序所需的一切。它： 为具有唯一ID的canvas元素添加HTML标记（本例中为“c”） 使用DOM的getElementById（）方法声明名
因此，我想知道一种调整画布大小的方法，但即使我在移动设备上更改风景，也要保持图像的准确位置 要调整画布大小，可以使用HTML5画布标记。下面是一个需要可调整大小画布的应用程序所需的一切。它：
<html>
<body>
<head>
<meta charset="utf-8">
<title>Resize HTML5 canvas dynamically</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
</style>
</head>
<body>
<canvas id='c' style = 'position: absolute; left: 0px; top: 0px;' >
</canvas>
<script>
(function() {
var
// Obtain a reference to the canvas element
// using its id.
htmlCanvas = document.getElementById('c'),
// Obtain a graphics context on the
// canvas element for drawing.
context = htmlCanvas.getContext('2d');
// Start listening to resize events and
// draw canvas.
initialize();
function initialize() {
// Register an event listener to
// call the resizeCanvas() function each time
// the window is resized.
window.addEventListener('resize', resizeCanvas, false);
// Draw canvas border for the first time.
resizeCanvas();
}
// Display custom canvas.
// In this case it's a blue, 5 pixel border that
// resizes along with the browser window.
function redraw() {
context.strokeStyle = 'blue';
context.lineWidth = '5';
context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}
// Runs each time the DOM window resize event fires.
// Resets the canvas dimensions to match window,
// then draws the new borders accordingly.
function resizeCanvas() {
htmlCanvas.width = window.innerWidth;
htmlCanvas.height = window.innerHeight;
redraw();
}
})();
</script>
</body>
</html>
动态调整HTML5画布的大小
html，正文{
宽度：100%；
身高：100%；
边际：0px；
边界：0；
溢出：隐藏；/*禁用滚动条*/
显示：块；/*侧面无浮动内容*/
}
（功能（）{
变量
//获取对canvas元素的引用
//使用它的id。
htmlCanvas=document.getElementById（'c'），
//在屏幕上获取图形上下文
//用于绘图的画布元素。
context=htmlCanvas.getContext（'2d'）；
//开始收听调整事件大小和
//画画布。
初始化（）；
函数初始化（）{
//将事件侦听器注册到
//每次调用resizeCanvas（）函数
//窗口已调整大小。
addEventListener（'resize'，resizeCanvas，false）；
//第一次绘制画布边框。
调整画布的大小（）；
}
//显示自定义画布。
//在本例中，它是一个蓝色的5像素边框
//随浏览器窗口调整大小。
函数重画（）{
context.strokeStyle='blue'；
context.lineWidth='5'；
strokeRect（0,0，window.innerWidth，window.innerHeight）；
}
//每次触发DOM窗口调整大小事件时运行。
//重置画布尺寸以匹配窗口，
//然后相应地绘制新边界。
函数resizeCanvas（）{
htmlCanvas.width=window.innerWidth；
htmlCanvas.height=window.innerHeight；
重画（）；
}
})();
//获取元素
const canvas=document.getElementById（“canvas”）；
const myDiv=document.getElementById（“我的div”）；
//将宽度和高度属性设置为div width和height
函数resize（）{
canvas.width=myDiv.clientWidth；
canvas.height=myDiv.clientHeight；
}
//在调整页面大小时，调用resize（）
addEventListener（“resize”，resize，false）；
//最初调用resize（）以正确设置画布大小
调整大小（）；
//当div更改大小时，可以调用resize（），将画布动态调整为div大小div{
宽度：50vw；
高度：50vh；
背景颜色：浅蓝色；
}
帆布{
背景色：rgba（255,0,0,0.5）；
}
position:fixedabsolutetop:0right:0