HTML5，如何使用JS自由控制画布的大小？

chen_2016_web 2016-10-18 11:39:39

效果类似于画图软件里面的那个画布，可以自由控制大小的，我试了几个方法，发现都有问题，求解！
PS：请用canvas标签。

...全文

399 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

chen_2016_web 2016-10-24

打赏
举报

这其实不是我想要的效果

当作看不见 2016-10-19

打赏
举报

第二个画布多余的没删掉,保留第一个即可,大小控制方式这里是按钮加大,减小,楼主可以自行设置

引用 4 楼 xmt1139057136 的回复:

百度云盘搜索解决了就结贴吧

版主大大帮忙结个帖

业余草 2016-10-19

打赏
举报

百度云盘搜索解决了就结贴吧

当作看不见 2016-10-18

打赏
举报


<style>
canvas{
	background-color: #0094FF;
}
</style>

</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<button onclick="clic()">hah</button>
</body>
<script type="text/javascript">
	var content=document.getElementById('canvas').getContext('2d')
	content.fillRect(50,50,100,100)
	content.fillStyle='black'
	
	function clic(){
			document.getElementById('canvas').setAttribute("width","400")
			content.fillRect(50,50,100,100)
			content.fillStyle='black'
	}
</script>

用输入框传入参数就可以自由控制大小，这是一个实现的例子，一个解决的思路

当作看不见 2016-10-18

打赏
举报

canvas ，不能直接设置style ，只会拉升画布，造成变形，只有设置setAttribute("width","")的方式来解决，但另一个问题又出现了，就是setAttribute("width","")可以设置宽和高，但是画图会被重绘，也就是清零。我联想到我做java一个游戏的时候也是这样，当时处理的做法是，两个画布，也就是一个隐藏，留存画布信息，当画布被改变大小等，就从隐藏的画布获取过来，相当于一个备份。主本长宽修改，获取备份，然后将主本重新备份到副本（，由于主本被改变长宽），副本也要变，

当作看不见 2016-10-18

打赏
举报

兄弟完美解决了,忙乎了1个多小时,蹭分不易


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<style type="text/css">
canvas{
	background: lawngreen;
}
</style>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<canvas id="canv" width="300" height="300"></canvas>
 <button id="add">add</button><button id="sub">sub</button>
</body>
<script type="text/javascript">
	var content=document.getElementById("canvas").getContext("2d")
	content.fillRect(50,50,100,100);
	content.fillStyle="black"


	document.getElementById("add").onclick=function(){
		
		var width=canvas.getAttribute("width")
		var height=canvas.getAttribute("height");
		
		var data=content.getImageData(0,0,width,height)
		
		
		width=parseInt(width)+10
		height=parseInt(height)+10
		
		
		canvas.setAttribute("width",width)
		canvas.setAttribute("height",height)
		
		content.putImageData(data,0,0)
	}
	
		document.getElementById("sub").onclick=function(){
			var width=canvas.getAttribute("width")
			var height=canvas.getAttribute("height");
			
			var data=content.getImageData(0,0,width,height)
			
			
			width=parseInt(width)-10
			height=parseInt(height)-10
			canvas.setAttribute("width",width)
			canvas.setAttribute("height",height)
			
			content.putImageData(data,0,0)
	}
</script>
</html>