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

lib

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

最近访客更多访客>>

xuecaobao123

书生Zhuang

ananiah

max530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5
canvas
web前端

web前端 html5 canvas

1、绘制弧线的方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x，y：圆心的坐标；

radius：圆心的半径；

startAngle：起始弧度（以横轴X为标准）；

endAngle：终止弧度（以横轴X为标准）；

anticlockwise： true表示逆时针，false表示顺时针；

注：arc方法中用到的角度是以弧度为单位，而不是度。

转换公式：var radians = (Math.PI/180)*degrees;

2、关于弧度的说明

相信看过图后，就很好理解了。

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.arc(100,100,80,0,Math.PI*2,true);
				cxt.moveTo(160,100);
				cxt.arc(100,100,60,0,Math.PI,false);
				cxt.moveTo(85,75);
				cxt.arc(75,75,10,0,Math.PI*2,false);
				cxt.moveTo(115,75);
				cxt.lineTo(135,75);
				cxt.stroke();
			}
		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>

代码显示的结果：

4、绘图实例--衣架

<!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.arc(100,30,15,Math.PI,Math.PI*0.5,false);
				cxt.lineTo(100,65);
				cxt.lineTo(30,100);
				cxt.arc(30,115,15,Math.PI*1.5,Math.PI*0.5,true);
				cxt.lineTo(170,130);
				cxt.arc(170,115,15,Math.PI*0.5,Math.PI*1.5,true);
				cxt.lineTo(100,65);
				cxt.stroke();
				cxt.closePath();
			}
		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>

代码显示的结果：