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

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>
 

 

代码显示的结果:

 


 

  • 大小: 14.4 KB
  • 大小: 6.9 KB
  • 大小: 2.6 KB
分享到:
评论
2 楼 lib 2012-03-10  
BuN_Ny 写道
抄袭?

衣架这个确实是抄袭的。
1 楼 BuN_Ny 2012-03-09  
抄袭?

相关推荐

    dom -canvas笔记

    ### DOM Canvas 绘图知识点详解 #### 一、Canvas 基础介绍 **Canvas** 是 HTML5 ...以上是关于 DOM Canvas 绘图的基础知识点,涵盖了从获取 Canvas 元素到具体绘图命令的详细解释,希望对学习 Canvas 绘图有所帮助。

    canvas学习之API整理笔记(一)

    在本篇“canvas学习之API整理笔记(一)”中,我们主要关注的是Canvas的基本API,包括如何获取Canvas元素、创建画布以及如何在Canvas上绘制基本图形。 首先,要在HTML中使用Canvas,需要在页面中添加一个`&lt;canvas&gt;`...

    Canvas日本伞背景动画特效.zip

    【标题】"Canvas日本伞背景动画特效.zip"所涉及...这个压缩包提供的代码可能包含了一个使用Canvas绘制伞形,结合jQuery进行交互控制,并辅以CSS美化和增强视觉效果的完整网页动画实例,适合前端开发者学习和二次开发。

    HTML5 Canvas飞机线条弧度飞行动画特效.zip

    在这个“HTML5 Canvas飞机线条弧度飞行动画特效”中,我们主要探讨的是如何利用HTML5的Canvas API创建一个飞机沿着弧线飞行的动画特效。 首先,`index.html`是网页的入口文件,它包含了HTML结构,其中关键的部分是...

    HTML5油漆绘图画板涂鸦特效.zip

    Canvas API提供了多种绘图方法,如`fillRect()`用于填充矩形,`strokeRect()`用于描边矩形,`beginPath()`、`moveTo()`、`lineTo()`等用于绘制路径,`arc()`用于绘制圆或弧线,`fill()`和`stroke()`分别用于填充和...

    android移动组件,基本内容

    这些组件包括视图(Views)、自定义视图(Custom Views)、画布(Canvas)、路径(Path)、绘图颜色和渐变、动画以及纹理贴图等。 首先,**视图(Views)**是Android UI系统的基本构建块,它们负责在屏幕上显示内容...

    android自定义View之NotePad出鞘记

    2. **绘图基础**:在`onDraw()`中,我们将利用Canvas对象进行绘图。Canvas提供了各种绘制几何形状(如矩形、线条、弧线)、文本和位图的方法。例如,我们可以用`canvas.drawRect()`绘制笔记的背景,用`canvas....

Global site tag (gtag.js) - Google Analytics