HTML5 进阶（6）——Canvas绘图基础（坐标体系、绘图、描边、填充、转换、渐变、文本、动画）

一、canvas基本使用

1.1 canvas元素

<canvas>元素只有两个属性width、height，当没有设置width、height时，<canvas>也就是画布的默认的width为300px，height为150px。

<canvas id="myCanvas" width="200" height="100">
	您当前的浏览器不支持canvas
</canvas>

ps：canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 脚本（JavaScript） 内部完成

1.2 设置canvas的宽和高

设置canvsa的宽高有两种方式：

• 直接在<canvas>标签中通过width和height属性来设置，可以不写单位，默认单位为px

<canvas id="myCanvas1" width="200" height="100">
	您当前的浏览器不支持canvas
</canvas>
<canvas id="myCanvas2" width="200px" height="100px">
	您当前的浏览器不支持canvas
</canvas>

• 在JS脚本中设置<canvas>的宽和高。

	<canvas id="canvas" class="canvas">
		你的浏览器不支持canvas	
	</canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		canvas.width = 100;
		height.height = 100;
		var ctx = canvas.getContext('2d');
	</script>

• 不要在css中设置<canvas>的宽和高
  在css中设置<canvas元素的宽和高，并不是设置了元素的大小，而是对已经画好内容的进行的缩放。

二、canvas坐标系统

Canvas有2D和3D之分，因此Canvas坐标系统也是有区别的，我们可以通过设置getContext('2d')让canvas获得一个2d环境。

在Canvas中2D环境中其坐标系统和Web坐标系统，以及和svg的最初坐标系统是一致的。

坐标原点（0,0）在canvas画布的左上角。

三、canvas绘制图形

• 路径（直线）
• 圆弧
• 矩形

3.1 路径（直线）

绘制路径用到的方法

• moveTo(x,y)
  将画笔移动到指定的位置。
• lineTo(x,y)
  定义一条从上一个坐标到当前坐标(x,y)的路径。
• stroke()
  描边，绘制出通过 moveTo() 和 lineTo() 方法定义的路径，默认颜色为黑色。
• strokeStyle = “color”
  在调用绘制前，改变路径的颜色。
• beginPath()
  起始一条新路径。
• closePath()
  闭合路径，并将画笔也移动到开始处。

3.1.1 绘制一条路径

	var canvas = document.getElementById('canvas');
	canvas.width = 500;
	canvas.height = 500;
	var ctx = canvas.getContext('2d');
	ctx.moveTo(100,100);
	ctx.lineTo(200,200);
	ctx.lineTo(200,300);
	ctx.stroke();

3.1.2 绘制三角形

	   var canvas = document.getElementById('canvas');
       var ctx = canvas.getContext('2d');
       ctx.strokeStyle = 'red';
       ctx.moveTo(300,150);
       ctx.lineTo(100,450);
       ctx.lineTo(500,450);
       ctx.closePath();
       ctx.stroke();

3.1.3 多次调用.stroke()方法重复绘制路径问题

坑2：ctx.stroke()方法是将我们做出的图从内存中画到画布上。多次使用ctx.stroke()会把之前的内容也重新画一遍，并重叠在原来的画上。

因为已经做好的图依旧 保存在内存 当中，ctx.stroke()仅仅是把内容绘制出来，并没有清除，所以在当要画出第二条线的时候，也会把第一条线再画一遍。

		var canvas = document.getElementById('canvas');
		canvas.width = 800;
		canvas.height = 800;
		var ctx = canvas.getContext('2d');
		ctx.moveTo(100,100);
		ctx.lineTo(100,200);
		ctx.lineTo(200,200);
		ctx.strokeStyle="#f00";
		ctx.stroke();

		ctx.moveTo(400,100);
		ctx.lineTo(400,200);
		ctx.lineTo(500,200);
		ctx.strokeStyle="#00F"; 
		ctx.stroke();

打个断点验证一下。

	//...
	ctx.strokeStyle= 'red';
	ctx.stroke();
	debugger;
	ctx.moveTo(400,100);
	//...

执行到第一个ctx.stroke()

执行到第二个ctx.stroke()

3.1.2 解决,stroke()重复绘制问题

方法一：
在所有图像绘制完成后再调用.stroke()将图像绘制到画布上。

	var canvas = document.getElementById('canvas');
	canvas.width = 800;
	canvas.height = 800;
	var ctx = canvas.getContext('2d');
	ctx.moveTo(100,100);
	ctx.lineTo(100,200);
	ctx.lineTo(200,200);
	ctx.strokeStyle= 'red';
	ctx.moveTo(400,100);
	ctx.lineTo(400,200);
	ctx.lineTo(500,200);
	ctx.strokeStyle="blue";
	
	ctx.stroke();

方法二：
使用.beginPath()方法释放之前已经画好的图像。

	var canvas = document.getElementById('canvas');
	canvas.width = 800;
	canvas.height = 800;
	var ctx = canvas.getContext('2d');
	ctx.moveTo(100,100);
	ctx.lineTo(100,200);
	ctx.lineTo(200,200);
	ctx.strokeStyle= 'red';
	ctx.stroke();
	ctx.beginPath();

	ctx.moveTo(400,100);
	ctx.lineTo(400,200);
	ctx.lineTo(500,200);
	ctx.strokeStyle="blue";
	ctx.stroke();

但是一旦使用了begin清除了之前的路径，可能就无法使用closePath闭合路径了

3.2 圆弧（圆）

arc(x,y,r,startAngle,endAngle[,anticlosewise])

• (x, y)为圆心，r为半径。
• startAngle 圆弧开始的弧度。（0 常用）
• endAngle 圆弧结束的弧度。（2*Math.PI 常用）
• anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认true，只是单纯画圆的话就可以省略)

案例1

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(95,50,40,0,2*Math.PI);
        ctx.stroke();

案例2

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(95,50,40,0,Math.PI,true);
        ctx.stroke();

3.3 矩形

描绘出一个矩形边框。

strokeRect(x, y, width, height)

• x和y是矩形左上角的坐标。
• width和height是宽和高。

	  var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      ctx.strokeStyle = 'red';
      ctx.moveTo(400,400);
      ctx.lineTo(500,500);
      ctx.stroke();
      //描出矩形
      ctx.strokeRect(100,100,300,200);

使用strokeRect()绘制矩形，不需要再调用stroke()

复杂一点的案例：

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.moveTo(300,50);
        ctx.lineTo(350,150);
        ctx.moveTo(450,50);
        ctx.lineTo(400,150);
        ctx.stroke();
        //头
        ctx.strokeRect(300,150,150,100);
        //耳
        ctx.strokeRect(280,170,20,40);
        ctx.strokeRect(450,170,20,40);
        //眼
        ctx.