关闭

html5 canvas坐标和大小的问题

标签: html5canvas
1007人阅读 评论(0) 收藏 举报
分类:

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>

正确的结果:



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11059次
    • 积分:259
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章分类