html5 canvas坐标和大小的问题

原创 2013年12月03日 15:55:38

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>

正确的结果:



html获取鼠标在页面的坐标以及在canvas上的坐标

以下程序实现了在canvas上画红色的圆,圆心为鼠标所在位置,其中圆的位置随着鼠标位置的移动而移动,js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标,getCanvasPos(canv...
  • u010484625
  • u010484625
  • 2015年05月27日 15:40
  • 6858

解决在canvas获取的坐标和窗口的坐标一样的问题

点击获取canvas内的鼠标坐标位置
  • li_li_lin
  • li_li_lin
  • 2014年12月01日 16:33
  • 4558

canvas在移动端横纵坐标比例不等

//canvas宽高就等于屏幕宽高,且等比例 can = document.getElementById("canvas"); ctx = can.getContext('2d'); ...
  • chen1115619885
  • chen1115619885
  • 2016年01月26日 11:44
  • 305

html5 canvas学习--移动坐标和旋转坐标

function drawTop(ctx,fillStyle){ ctx.fillStyle = fillStyle; ctx.beginPath(); ctx.arc(0,0,30...
  • W3Chhhhhh
  • W3Chhhhhh
  • 2016年10月07日 20:23
  • 1861

使用html2canvas截图不全问题解决方案——经测可用

首先说明下我们的需求: 在预览详情页时,要将预览页通过点击事件保存为图片 遇到的问题: 在使用了html2canvas插件后,出现了只能截取可视区域的页面的状况 解决方案: 根据需求页面需在加...
  • qq_31808577
  • qq_31808577
  • 2017年06月15日 09:13
  • 9263

【实例】【html5】在canvas获取鼠标的坐标

方法 使用onmousemove来实时获取当前鼠标移动事件,以刷新新的坐标 使用canvas.getBoundingClientRect()获取当前画布的位置信息 实现 在线演示 ...
  • u010513756
  • u010513756
  • 2015年08月09日 07:50
  • 31599

Canvas适配手机端

Canvas适配困境最近做了个H5小游戏,它的主页的html代码如下:
  • jlin991
  • jlin991
  • 2017年03月13日 22:46
  • 3808

手机端常见问题

mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些...
  • bizhigang0119
  • bizhigang0119
  • 2016年12月07日 13:45
  • 1105

html5的canvas坐标变换

原文:http://blog.sina.com.cn/s/blog_5f38c0560100uzrj.html Html5 Canvas变形 个人觉得本质其实就是矩阵变换transform 坐标变...
  • zlj_vip
  • zlj_vip
  • 2013年12月31日 18:56
  • 981

【实例】html5在canvas上绘制坐标轴

直接上代码 #canvas { border: thin solid red; } var canvas = docu...
  • u010513756
  • u010513756
  • 2015年08月17日 16:37
  • 10943
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 canvas坐标和大小的问题
举报原因:
原因补充:

(最多只允许输入30个字)