`
lib
  • 浏览: 133467 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Canvas学习笔记(二)--绘图（矩形）

web前端html5canvas 
阅读更多

1、canvas网格坐标



 左上角为坐标原点(0,0)，横轴X向右坐标值增大，纵轴Y向下坐标值增大。坐标系中所有物体的位置都相对于这个原点。如图所示，蓝色方块的位置距左边x像素，距上面y像素，坐标为(x,y)。

 

2、绘制矩形

 

fillRect(x,y,width,height)：绘制填充颜色的矩形；

 

strokeRect(x,y,width,height)：绘制带有边框的矩形；

 

clearRect(x,y,width,height)：清空绘制的矩形区域，并使之透明；

 

参数的含义：

 

X：横坐标的位置；

y：纵坐标的位置；

width：矩形的宽度；

height：矩形的高度；

 

X,Y表示矩形左上角相对于原点(0,0)的位置。

 

矩形演示代码如下：

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			var canvas = document.getElementById('test');
			
                         if(canvas.getContext){
				var cxt = canvas.getContext('2d');

				cxt.fillRect(5,5,100,100);
				cxt.clearRect(20,20,50,50);
				cxt.strokeRect(120,120,70,70);
			}

		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

 

看看3个方法不同的效果：


 

 

 

  • 大小: 1.2 KB
  • 大小: 894 Bytes
分享到：
| Canvas学习笔记(一)--基础知识
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics