canvas画布--画布宽高设定

xiaodai8580 6年前 (2019-04-16) 827℃ 0次吐槽

<canvas >中有默认宽高300px*150px。

如果在<canvas>标签中没有设定宽高，那么浏览器就会取默认值并进行拉伸。

实际上我们在css中定义的宽高并没有生效，所以会出现变形的情况。

<style type="text/css">
	#mycan{
		width: 600;
		height: 500;
	}
</style>

如上所示，css中定义的宽高并没有生效！

正确的写法应该是在<canvas>中设定所需宽高。

canvas画布宽高只能通过数值设定，不能使用百分比，也不需要单位。

<script type="text/javascript">
	var mycan = document.getElementById("mycan");
	mycan.width = 600;
	mycan.height = 500;
</script>