Canvas学习笔记(三)--绘图（路径【直线】）

lib

浏览: 136033 次
性别:
来自: 济南

最近访客更多访客>>

xuecaobao123

书生Zhuang

ananiah

max530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

canvas
web前端
html5

web前端 html5 canvas

1、绘制路径的方法

beginPath()：开始一个新路径。

closePath()：关闭路径。

stroke()：绘制路径边框。

fill()：使用颜色填充路径绘制的图形。

moveTo(x,y)：设置坐标的位置。

lineTo(x,y)：绘制一条直线。参数(x,y)是终点的坐标，起点坐标取决于前一路径（即：前一路径的终点就是当前路径的起点。可以通过moveTo()设置起始坐标。）

2、绘制路径的步骤

第一步：调用beginPath()创建路径。在内存里，路径是以一组子路径（直线、弧线等）进行存储，共同构成一个图形。每次调用beginPath()，子路径都会被重置，这样就可以绘制新的图形。

第二步：实际绘制路径。

第三步：调用closePath()关闭路径。尝试在当前端点通过直线连接起始端点来关闭图形。如果图形已经关闭或者只有一个点，则不会执行任何操作。这一步是可选的。

第四步：调用stroke()或者fill()，此时，图形才实际的绘制到canvas上。

注：使用fill()时，图形会自动闭合，不需要调用closePath().

3、绘制路径实例

<!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 can = document.getElementById('test');
			
            if(can.getContext){
				var cxt = can.getContext('2d');

				cxt.beginPath();
				cxt.moveTo(50,10);
				cxt.lineTo(100,160);
				cxt.lineTo(20,90);
				cxt.lineTo(50,10);
				cxt.stroke();

				cxt.beginPath();
				cxt.moveTo(190,20);
				cxt.lineTo(120,190);
				cxt.lineTo(140,50);
				cxt.fill();
			}

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

  </body>
</html>

代码显示的效果：