Canvas学习笔记(二)--绘图（矩形）
1、canvas网格坐标http://dl.iteye.com/upload/attachment/0064/5362/71f1e0f2-f845-341d-8d8b-c51efe72dcac.png
左上角为坐标原点(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 ><canvas id="test" width="200px" height="200px" class="wraper"></canvas></body></html>
看看3个方法不同的效果：
http://dl.iteye.com/upload/attachment/0064/5387/be7be1be-0b68-38a9-b2b2-41b63a9138d3.png
页:
[1]