【HTML5】记录一下学习HTML5的一些新元素------（2）

一、Canvas

• 【HTML5】记录一下学习HTML5的一些新元素------（1）

这一章依然是学习记录canvas 。根据MDN上的来记录一下；

1. 检测浏览器的兼容性：

<canvas id="mycanvas_103" width="" height="" style="border: coral solid;">
			您的浏览器不支持canvas
		</canvas>
		<script>
			var c = document.getElementById("mycanvas_103");
			(function(){  //检测兼容性
				if(!c.getContext("2d"))  return false;
			})();
		</script>

2、闭合路径closePath()

• 非必需：

• 这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的或者这个方法位于stroke之后！该函数什么也不做。【当位于stroke之前时才有变化！】看下面例子：

<canvas id="mycanvas_103" width="" height="" style="border: coral solid;">
			您的浏览器不支持canvas
</canvas>
<script>
	var c = document.getElementById("mycanvas_103");
	(function(){
		if(!c.getContext("2d"))  return false;
		if(!document.getElementById) return false;
	})();
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(120,39);		// 一条
			ctx.lineTo(65,93);		//两条
		// ctx.closePath();  先注释掉【或者该语句位于 stroke之后也不会闭合图形】
			ctx.stroke();
		</script>

可以看到画出两条直线，图像是非闭合的！！！

现在我使用closePath（）方法位于画笔之前，就会直接闭合图形！！！

var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(120,39);
			ctx.lineTo(65,93);
			ctx.closePath();		//在使用stroke 之前闭合路径
			ctx.stroke();

• 当你调用fill()函数时，所有没有闭合的形状都会自动闭合，不需要调用closePath()函数。但是调用stroke()时不会自动闭合； 如下例子：

var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(120,39);
			ctx.lineTo(65,93);
			// ctx.closePath();				//不调用该方法
			ctx.fill();

3、圆弧

• arc(x,y,r,start,stop，counterclockwise)：
• 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
• startAngle以及endAngle参数 定义了开始以及结束的弧度

注意：arc()函数中表示角的单位是弧度，不是角度。
角度与弧度的js表达式： 弧度=(Math.PI / 180)*角度。