html5 canvas坐标和大小的问题

fillRect(100,100,100,100) 前2个100是指坐标,后2个100是指宽和高。

今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。

错误的方式1:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#mycanvas{
			width: 200px;
			height: 200px;
			background: yellow;
		}
	</style>
</head>
<body>
	<canvas id='mycanvas' ></canvas>
	<script>
		var c = document.getElementById('mycanvas');
		var ctx = c.getContext("2d");
		ctx.fillStyle='#f36';
		ctx.fillRect(100, 100, 100, 100);
	</script>
</body>
</html>
错误的方式2:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id='mycanvas'  style='width:200px;height:200px;background:yellow'></canvas>
	<script>
		var c = document.getElementById('mycanvas');
		var ctx = c.getContext("2d");
		ctx.fillStyle='#f36';
		ctx.fillRect(100, 100, 100, 100);
	</script>
</body>
</html>


显示结果:


正确的方式:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id='mycanvas' width='200px' height='200px' style='background:yellow'></canvas>
	<script>
		var c = document.getElementById('mycanvas');
		var ctx = c.getContext("2d");
		ctx.fillStyle='#f36';
		ctx.fillRect(100, 100, 100, 100);
	</script>
</body>
</html>

正确的结果:



阅读更多
文章标签: html5 canvas
个人分类: html5
想对作者说点什么? 我来说一句

html2canvas.js--自定义高度

2017年01月12日 123KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭