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>

正确的结果:



关于HTML5中Canvas的宽、高设置问题

Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法: 方法一: 1 方法二:使用HTML5 Canvas API操作 OK 1 var canvas = docume...
  • mochong
  • mochong
  • 2017年03月28日 14:07
  • 221

html5的canvas坐标变换

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

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

方法 使用onmousemove来实时获取当前鼠标移动事件,以刷新新的坐标 使用canvas.getBoundingClientRect()获取当前画布的位置信息 实现 在线演示 ...

html5之Canvas坐标变换应用-时钟实…

在上一篇中我们了解html5的Canvas ,在这一篇中不用多说,写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate),以及html5 C...

HTML5教程-用Canvas标签绘制坐标变换图形

HTML5教程-用Canvas标签绘制坐标变换图形 绘制图形的时候,我们可能经常会想到旋转图形,或者对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,就能实现这种效果。 ...

HTML5教程实例-Canvas标签-坐标变换与路径结合使用

HTML5教程实例-Canvas标签-坐标变换与路径结合使用 到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制如下图的图形怎么办呢? 我们需要对矩形变形,使用坐标变换就足...

Html5 Canvas 变换矩阵与坐标变形之间的关系

Html5 Canvas变形 个人觉得本质其实就是矩阵变换transform 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到。  ...
  • xinma
  • xinma
  • 2012年10月15日 16:26
  • 728

利用HTML5 Canvas和Javascript实现的蚁群算法求解TSP问题演示

奇葩方法,看着挺酷的,忍不住转载。。 HTML5提供了Canvas对象,为绘图应用提供了便利. Javascript可运行于浏览器中, 而不需要安装特定的编译器; 基于HTML5和J...

HTML5 Canvas遇到的几个问题

最近在一个项目中尝试通过Hybrid的方式开发客户端程序,来尽量降低由于程序业务逻辑或者显示界面的改变而来的升级困扰。Hybrid的方式就是本地代码和HTML5应用相结合的方式,其中本地代码负责和底层...
  • mydeman
  • mydeman
  • 2013年09月17日 12:24
  • 13682

解决html5 + js开发APP无法显示SVG问题(转化成canvas)

项目里用到了kendo UI DataViz的折线图、饼状图等去显示一些统计信息,这些图的显示用到了SVG。   现在最新的Chrome、Safari、Moz都支持了SVG标签,甚至是iPhone里...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 canvas坐标和大小的问题
举报原因:
原因补充:

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