Web前端学习笔记——Canvas 01

程序员文章站 2022-05-10 19:59:02

...

一、canvas简介

1.1 什么是canvas？（了解）

是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布画布
Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等

1.2 canvas主要应用的领域（了解）

游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。
25 超棒的 HTML5 Canvas 游戏
可视化数据.数据图表话，比如:百度的echart
banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
未来=> 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
未来=> 图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。
其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
完整的canvas移动化应用
我们课程的目标
- 我们不是主要做游戏开发的
- 要求必须会做基本的用canvas绘制的特效页面：比如，传智前端官网。
- 会用canvas做一些简单的广告、活动页面
我们课程的案例和项目演示
canvas的标准：
- 最新标准：http://www.w3.org/TR/2dcontext/
- 稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
- 目前来说，标准还在完善中。先用早期的api足够完成所有的应用

二、canvas绘图基础

2.0 sublime配置canvas插件（推荐）

推荐：
    安装插件：AndyJS2
    github地址： https://github.com/malun666/AndyJS2
    直接下载到：X:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages

2.1 Canvas标签

2.1.1 canvas标签语法和属性（重点）

canvas：画布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
标签名canvas，需要进行闭合。就是一普通的html标签。
可以设置width和height属性，但是属性值单位必须是px，否则忽略。
width和hegiht：默认300*150像素
注意：
- 不要用CSS控制它的宽和高,会走出图片拉伸，
- 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
- 可以给canvas画布设置背景色

2.1.2 浏览器不兼容处理（重点）

ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
移动端的兼容情况非常理想，基本上随便使用
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果浏览器不兼容，最好进行友好提示
例如： <canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本 </canvas>
浏览器不兼容，可以使用flash等手段进行优雅降级

2.2 canvas绘图上下文context

2.2.1 Context：Canvas的上下文、绘制环境。（重点掌握）

上下文：上知天文，下知地理。是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的。
Context对象就是JavaScript操作Canvas的接口。 *使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。
var canvas = document.getElementById( 'cavsElem' ); //获得画布 var ctx = canvas.getContext( '2d' );//注意：2d小写， 3d：webgl

2.3 基本的绘制路径（重点）

2.3.1 canvas坐标系

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大

Web前端学习笔记——Canvas 01

2.3.2 设置绘制起点(moveTo)

* 语法：ctx.moveTo(x, y); 
* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置
* 参数：x,y 都是相对于 canvas盒子的最左上角。
* 注意：**绘制线段前必须先设置起点，不然绘制无效。**

2.3.3 绘制直线(lineTo)

* 语法：ctx.lineTo(x, y);
* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数：x,y 线头点坐标。

2.3.4 路径开始和闭合

* 开始路径：ctx.beginPath();
* 闭合路径：ctx.closePath();
* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。
* beginPath: 核心的作用是将 不同绘制的形状进行隔离，
  每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

2.3.5 描边(stroke)

* 语法：ctx.stroke();
* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke
* stroke: （用笔等）画；轻抚；轻挪；敲击；划尾桨；划掉；（打字时）击打键盘
 英 [strəʊk]   美 [strok]

canvas绘制的基本步骤：
- 第一步：获得上下文 =>canvasElem.getContext('2d');
- 第二步：开始路径规划 =>ctx.beginPath()
- 第三步：移动起始点 =>ctx.moveTo(x, y)
- 第四步：绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)
- 第五步：闭合路径 =>ctx.closePath();
- 第六步：绘制描边 =>ctx.stroke(); ``` html部分：
javascript部分：

//===============基本绘制api==================== //获得画布 var canvas = document.querySelector('#cavsElem'); var ctx = canvas.getContext('2d'); //获得上下文

canvas.width = 900; //设置标签的属性宽高 canvas.height = 600; //千万不要用 canvas.style.height canvas.style.border = "1px solid #000";

//绘制三角形 ctx.beginPath(); //开始路径 ctx.moveTo(100,100); //三角形，左顶点 ctx.lineTo(300, 100); //右顶点 ctx.lineTo(300, 300); //底部的点 ctx.closePath(); //结束路径 ctx.stroke(); //描边路径 ```

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01canvas入门</title>
	<style>
		#demo {
			/*width: 1200px;
			height: 1200px;*/
		}

	</style>
</head>
<body>
	<!-- 设置canvas标签的宽高是通过canvas标签的属性进行设置。
	不要用css去设置 -->
	<canvas id='demo' width="600" height="600">
		ie9 以上才支持 canvas
		你的浏览器不支持canvas，请升级浏览器
		<!-- flash -->
	</canvas>

	<script>
	//第一步： 拿到canvas的标签
	var canvas = document.getElementById('demo');
	canvas.style.border = '1px solid red';
	canvas.width = 600;
	canvas.height = 600;
	// canvas.sytle.height = 1200;// 千万别这么玩。

	//第二步： 拿到 canvas的上下文
	var ctx = canvas.getContext('2d'); // 'webgl'

	//第三步： 绘制
	//moveTo(x0,y0);//第一个参数是x点坐标， 第二个参数是y点坐标
	ctx.moveTo(100,100); //把画笔移动到 100,100点
	ctx.lineTo(200,100); //从画笔的位置 画一条直线到 200,100点
	ctx.lineTo(100,200); //从当前位置，再画一条直线到 100,200点。

	// ctx.lineTo(100,100);
	ctx.closePath();// 闭合路径

	//设置线宽
	ctx.lineWidth = 4;
	//设置描边的样式
	// ctx.strokeStyle = 'rgba(233,233,233,.8)'; //跟上颜色， rgb(), rgba() red blue #888
	ctx.strokeStyle = 'red'; //跟上颜色， rgb(), rgba() red blue #888
	ctx.stroke();//stroke：描边的意思。

	//设置填充的样式
	ctx.fillStyle = 'green';
	//进行填充的工作
	ctx.fill();

	</script>
</body>
</html>

综合案例：02绘制定位表格.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>02Canvas案例-绘制表格</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<script>


		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";

			var rectH =  10;
			var rectW = 10;
			ctx.lineWidth = .5;
			//绘制表格
			// 第一步： 绘制横线
			for(var i = 0; i < canvas.width / rectH; i++ ) {
				ctx.moveTo(0, i * rectH);//如果不设置moveTo，当前画笔没有位置
				ctx.lineTo(canvas.width, i * rectH);

				//第二步：绘制竖线：
				ctx.moveTo( i * rectW ,0);
				ctx.lineTo(i * rectW, canvas.height );
			}

			ctx.stroke();

		}());
	</script>
</body>
</html>

基于状态的绘图

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>03Canvas案例-基于状态的绘图</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";

			ctx.strokeStyle = 'red';
			ctx.lineWidth = 20;

			//第一条线
			ctx.beginPath();//没有必要的。默认上来就一个状态
							//状态里面： 当前状态里面的绘制样式。
			ctx.moveTo(100,100);
			ctx.lineTo(300,100);

			ctx.stroke();

			//绘制的第二条线
			ctx.beginPath();// 2开一个新路径，开启新状态的绘图
							//开启了一个新的状态，新状态可以继承之前状态的样式，
							//但是当前状态设置所有的样式，只能作用于当前的状态。
			ctx.strokeStyle = 'green';
			ctx.moveTo(100, 200);
			ctx.lineTo(300, 200);
			ctx.stroke();
			

		}());
	</script>
</body>
</html>

2.3.7 填充(fill)

* 语法：ctx.fill(); 
* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。


* 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。

    以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）
    “非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，
    使此线段的终点完全落在路径范围之外。
    图2-14中的那三个箭头所描述的就是上面这个步骤。
    接下来，将计数器初始化为0，
    然后，每当这条线段与路径上的直线或曲线相交时，
    就改变计数器的值。如果是与路径的顺时针部分相交，则加1，
    如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，
    浏览器就会对其进行填充。
    如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了
* 案例： 04填充矩形.html

Web前端学习笔记——Canvas 01

2.3.8 快速创建矩形rect()方法

* 语法：ctx.rect(x, y, width, height);
* 解释：x, y是矩形左上角坐标， width和height都是以像素计
* rect方法只是规划了矩形的路径，并没有填充和描边。
* 改造案例：04填充矩形.html
*rect: abbr. 矩形（rectangular）；收据（receipt）

2.3.9 快速创建描边矩形和填充矩形

* 语法： ctx.strokeRect(x, y, width, height);
    - 参数跟2.3.8相同，注意此方法绘制完路径后立即进行stroke绘制
* 语法：ctx.fillRect(x, y, width, height);
    - 参数跟2.3.8相同， 此方法执行完成后。立即对当前矩形进行fill填充。

2.3.10 清除矩形(clearRect)

* 语法：ctx.clearRect(x, y, width, hegiht);
* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>01Canvas案例-</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";
			// 前两个参数是:矩形的x,y坐标，　后面两个参数：矩形的宽高
			//ctx.rect(x,y,w,h);
			ctx.rect(100,100,50,50);
			ctx.stroke();

			//描边矩形
			ctx.strokeRect(200, 200, 100, 150);

			//填充矩形
			ctx.fillRect(300, 300, 40, 40);
		}());
	</script>
</body>
</html>

2.4 绘制圆形（arc)

概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
- 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
- arc: 弧（度）弧形物；天穹英 [ɑːk] 美 [ɑrk]
- counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
- 解释：
  - x,y：圆心坐标。
  - r：半径大小。
  - sAngle:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
  - eAngel:结束的角度，注意是弧度。π
  - counterclockwise：是否是逆时针。true是逆时针，false：顺时针
  - 弧度和角度的转换公式： rad = deg*Math.PI/180;
  - 在Math提供的方法中sin、cos等都使用的弧度

案例：06绘制饼状图.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>06Canvas案例-绘制圆弧</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";

			//绘制一条 0 到30的弧
			//   弧度和角度的转换公式： rad = 30 * Math.PI / 180
			// ctx.moveTo(300,300);
			// ctx.arc(300,300,100, 0*Math.PI/180, 30 * Math.PI/ 180,true);
			// ctx.closePath();
			// ctx.fill();
			// ctx.stroke();

			//绘制扇区
			// ctx.moveTo(300,300);
			// ctx.fillStyle = 'red';
			// ctx.arc(300, 300, 100,-90*Math.PI/180, -30 * Math.PI/ 180)
			// ctx.fill();

			var data = [{
				"value": .2,
				"color": "red",
				"title": "应届生"
			},{
				"value": .3,
				"color": "blue",
				"title": "社会招生"
			},{
				"value": .4,
				"color": "green",
				"title": "老学员推荐"
			},{
				"value": .1,
				"color": "#ccc",
				"title": "公开课"
			}];

			var tempAngle = -90;

			//设置角度的中间变量
			var x0 = 400, y0 = 400;
			var radius = 200;
			// 从-90度开始绘制
			for( var i = 0; i < data.length; i++ ) {
				ctx.beginPath();//因为设置不同的颜色，所以每次绘制完起一个新状态
				ctx.moveTo(x0,y0);
			    //当前扇形的角度
				var angle = data[i].value * 360;
				ctx.fillStyle = data[i].color;
				//开始从 tempAngle绘制
				var startAngle  = tempAngle * Math.PI / 180;
				//从tempAngle绘制到 我们自己的angle区域
				var endAngle = (tempAngle + angle) * Math.PI / 180;

				//参数： x0，y0 圆心坐标，  radius：半径
				// startAngle：开始绘制的弧度
				// endAngle：结束绘制的弧度！！
				ctx.arc(x0, y0, radius, startAngle, endAngle);

				ctx.fill();
				tempAngle += angle;//下一次绘制的起始角度
			}

		}());
	</script>
</body>
</html>

2.5 绘制文字（会使用就可以了）

2.5.1 绘制上下文的文字属性（有印象就行了）

font 设置或返回文本内容的当前字体属性
- font 属性使用的语法与 CSS font 属性相同。 例如：ctx.font = "18px '微软雅黑'";
textAlign 设置或返回文本内容的当前对齐方式
- start : 默认。文本在指定的位置开始。
- end : 文本在指定的位置结束。
- center: 文本的中心被放置在指定的位置。
- left : 文本左对齐。
- right : 文本右对齐。
```
- 例如：ctx.textAlign = 'left';
```
textBaseline 设置或返回在绘制文本时使用的当前文本基线
- alphabetic ：默认。文本基线是普通的字母基线。
- top ：文本基线是 em 方框的顶端。。
- hanging ：文本基线是悬挂基线。
- middle ：文本基线是 em 方框的正中。
- ideographic：文本基线是em基线。
- bottom ：文本基线是 em 方框的底端。

例如： ctx.textBaseline = 'top';
    单词:
     alphabetic: 字母的；照字母次序的   [,ælfə'bɛtɪk]
     ideographic：表意的；表意字构成的   英 [,ɪdɪəʊ'ɡræfɪk]   美 [,ɪdɪə'græfɪk]

2.5.2 上下文绘制文字方法

* ctx.fillText()      在画布上绘制“被填充的”文本
* ctx.strokeText()    在画布上绘制文本（无填充）
* ctx.measureText()   返回包含指定文本宽度的对象
* 单词：measure 测量；估量；权衡   英 ['meʒə]   美 ['mɛʒɚ]

//综合案例代码： ctx.moveTo( 300, 300 );

ctx.fillStyle = "purple"; //设置填充颜色为紫色

ctx.font = '20px "微软雅黑"'; //设置字体

ctx.textBaseline = "bottom"; //设置字体底线对齐绘制基线

ctx.textAlign = "left"; //设置字体对齐的方式

//ctx.strokeText( "left", 450, 400 );

ctx.fillText( "Top-g", 100, 300 ); //填充文字

2.5.3 案例饼状图绘制文字.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>06Canvas案例-绘制圆弧</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 900;
			canvas.height = 700;
			canvas.style.border = "1px solid #000";

			var data = [{
				"value": .2,
				"color": "red",
				"title": "应届生"
			},{
				"value": .3,
				"color": "blue",
				"title": "社会招生"
			},{
				"value": .4,
				"color": "green",
				"title": "老学员推荐"
			},{
				"value": .1,
				"color": "#ccc",
				"title": "公开课"
			}];

			var tempAngle = -90;//绘制到哪个角度了，起始角度是-90度。

			//设置角度的中间变量
			var x0 = 400, y0 = 400;
			var radius = 200;
			// 从-90度开始绘制
			for( var i = 0; i < data.length; i++ ) {
				ctx.beginPath();//因为设置不同的颜色，所以每次绘制完起一个新状态
				ctx.moveTo(x0,y0);
			    //当前扇形的角度
				var angle = data[i].value * 360;

				ctx.fillStyle = data[i].color;
				//开始从 tempAngle绘制
				var startAngle  = tempAngle * Math.PI / 180;
				//从tempAngle绘制到 我们自己的angle区域
				var endAngle = (tempAngle + angle) * Math.PI / 180;

				//参数： x0，y0 圆心坐标，  radius：半径
				// startAngle：开始绘制的弧度
				// endAngle：结束绘制的弧度！！
				ctx.arc(x0, y0, radius, startAngle, endAngle);

				//绘制文字：
				var txt = data[i].value * 100 + '%';

				var x, y;
				// 计算出文字的要放的角度
				var txtAngle = tempAngle + 1/2 * angle;

				//计算文字的 坐标
				x = x0 + Math.cos( txtAngle * Math.PI / 180 ) * (radius + 20); 
				y = y0 + Math.sin( txtAngle * Math.PI / 180 ) * (radius + 20);

				//如果文字在圆形的左侧，那么让文字 对齐方式为 文字结尾对齐当前坐标。
				if( txtAngle > 90 && txtAngle < 270 ) {
					ctx.textAlign = 'end';
				}

				//把文字绘制到 扇形区域的 旁边
				ctx.fillText(txt, x, y);

				ctx.fill();

				tempAngle += angle;//下一次绘制的起始角度
			}

		}());
	</script>
</body>
</html>

2.6 绘制图片（drawImage）（重点）

2.6.1 基本绘制图片的方式

context.drawImage(img,x,y);
参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

2.6.2 在画布上绘制图像，并规定图像的宽度和高度

context.drawImage(img,x,y,width,height);   
参数说明：width 绘制图片的宽度，  height：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸</em>
    等比公式：  toH = Height * toW   /  Width;  //等比 
             设置高 = 原高度 * 设置宽/ 原宽度;

2.6.3 图片裁剪，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：
    sx,sy 裁剪的左上角坐标，
    swidth：裁剪图片的高度。 sheight:裁剪的高度 
    其他同上

2.6.4 用JavaScript创建img对象

第一种方式： 
   var img = document.getElementById("imgId");
第二种方式：
    var img = new Image();//这个就是 img标签的dom对象
    img.src = "imgs/arc.gif";
    img.alt = "文本信息";
    img.onload = function() {
        //图片加载完成后，执行此方法
    }

2.6.5 面向对象基础复习补充：

创建对象的方式： ```
- var o = { name: '123', age: 18 }; //json方式创建
- var o = new Object(); //通过new的方式创建
- var o = new Persion(); //通过类的构造函数创建 ```
JS中对象的属性创建方式 ```
- json的方式： var o = { age: 19 };
- 直接添加属性：var o = {}; o.age = 19;//太分散了，不利于管理
- 由于js动态语言的特性，如果属性不存在的时候，直接添加属性。
- 构造函数添加属性
- 原型添加公共的属性 ```
JS的构造函数的原型构造函数的原型就是：构造对象的模板，构造函数原型里面的所有的属性和方法都会共享给所有的构造函数构造出来的所有实例。

案例： 09绘制图片裁剪.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>07Canvas案例-图片绘制</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<!-- <img src="" id='imgDemo' alt=""> -->
	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";

			// var img2 = document.getElementById('imgDemo');
			//第一步： 创建图片的dom对象
			var img = new Image();//
			img.src = 'imgs/a.jpg'; //只要设置了src属性，当前img对象立即去加载图片。

			img.onload = function() {
				//图片加载完成后，把图片绘制到canvas上
				// ctx.drawImage( img, 100, 100 );

				// for( var i = 0; i < 10; i++ ) {
				// 	ctx.drawImage( img, 100 + 20* i, 100 + i * 20 );
				// }
				var ow = img.width;
				var oh = img.height;

				//绘制指定  宽高比的图片
				ctx.drawImage( img, 100, 100,  400, 400* oh/ow );


			};

			//绘制指定的裁切图片
			var img2 = new Image();
			img2.src = 'imgs/gameImgs/DMMban.png';
			img2.onload = function() {

				ctx.drawImage(img2, 40, 65, 40, 65, 300,300, 40,65);
			};

		}());
	</script>
</body>
</html>

案例： 10序列帧动画.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>08Canvas案例-绘制序列帧动画</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>
	<button id="btn-dir-left">←</button>
	<button id="btn-dir-right">→</button>
	<button id="btn-dir-up">↑</button>
	<button id="btn-dir-down">↓</button>

	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";
			//direction: 方向。
			var dirIndex =  0;//设置 方向的索引

			//加载图片
			var img = new Image();
			img.src = 'imgs/gameImgs/DMMban.png';
			//绘制精灵图片
			img.onload = function() {
				var frameIndex = 0;
				setInterval(function(){
					//清除 之前的 图片墨迹。
					ctx.clearRect(0, 0, canvas.width, canvas.height);

					// 如果通过代码重新设置 canvas画布的宽高，那么canvas画布里面的所有的内容都被清空。
					canvas.width = canvas.width;

					ctx.drawImage( 
						img
						, frameIndex * 40 //截取原始图片的 x坐标
						, dirIndex * 65	  //截取原始图片的 y坐标
						, 40			  //截取原始图片的 宽度
						, 65			  // 截取的高度
						, 200			  //图片在canvas画布上的x坐标
						, 200			  //图片在canvas画布上的y坐标
						, 80			  //绘制图片的宽度
						, 65 *2			  //绘制图片的高度
					 );

					frameIndex++;// 添加到下一帧
					frameIndex %= 4; // 取余数   7 %4 = 3   3%4 =3  4%4 =0
					// frameIndex = frameIndex % 4;
				}, 1000 / 10);// 10 帧，100毫秒绘制一动作
			};


			//==================绑定事件==============
			//绑定按钮的点击事件
			var btnLeft = document.getElementById('btn-dir-left');
			btnLeft.onclick = function() {
				//小哥哥朝着左方向
				dirIndex = 1;
			};

			var btnRight = document.getElementById('btn-dir-right');
			btnRight.onclick = function() {
				//小哥哥朝着左方向
				dirIndex = 2;
			};

			var btnUp = document.getElementById("btn-dir-up");
			btnUp.onclick = function() {
				//小哥哥朝着左方向
				dirIndex = 3;
			};

			var btnDown = document.getElementById('btn-dir-down');
			btnDown.onclick = function() {
				//小哥哥朝着左方向
				dirIndex = 0;
			};

		}());
	</script>
</body>
</html>

案例： 11面向对象版本的动画帧.html 重点

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>07Canvas案例-精灵面向对象</title>
		<script src="js/Sprite.js"></script>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<button id="btn-dir-left">←</button>
	<button id="btn-dir-right">→</button>
	<button id="btn-dir-up">↑</button>
	<button id="btn-dir-down">↓</button>

	<script>
		(function(){
			var canvas = document.querySelector( '#cavsElem' );
			var ctx = canvas.getContext( '2d' );

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";

			// 封装一个对象出来：
			// 属性： width . height  imgSr  speed  dir
			// 行为： render  changeDir  
			
			//创建一个精灵对象
			var s = new Sprite({
				x: 300,
				y: 300,
				w: 80,
				h: 65*2,
				fps: 4,
				originW: 40,
				originH: 65,
				imgSrc: 'imgs/gameImgs/DMMban.png'
			}); 

			//渲染 动画
			s.render(ctx);


			//绑定按钮的点击事件
			var btnLeft = document.getElementById('btn-dir-left');
			btnLeft.onclick = function() {
				//小哥哥朝着左方向
				// dirIndex = 1;
				s.changeDir('left');
			};

			var btnRight = document.getElementById('btn-dir-right');
			btnRight.onclick = function() {
				//小哥哥朝着方向
				// dirIndex = 2;
				s.changeDir('right');

			};

			var btnUp = document.getElementById("btn-dir-up");
			btnUp.onclick = function() {
				//小哥哥朝着左方向
				// dirIndex = 3;
				s.changeDir('up');

			};

			var btnDown = document.getElementById('btn-dir-down');
			btnDown.onclick = function() {
				//小哥哥朝着左方向
				// dirIndex = 0;
				s.changeDir('down');

			};




		}());
	</script>
</body>
</html>

//Sprite.js
function Sprite( option ) {
	//构造函数执行的时候，立即调用初始化的函数
	this._init( option );
}


Sprite.prototype = {
	//初始化
	_init: function( option ) {
		this.x = option.x === 0 ? 0 : (option.x || 10);//0
		this.y = option.y === 0 ? 0 : (option.y || 10);//0

		this.w = option.w || 40; // 绘制到canvas上的宽高
		this.h = option.h || 65;

		this.fps =  option.fps || 10; // frame per second
		this.originW = option.originW || 40;	// 截取的精灵图片中的 精灵的宽高。
		this.originH =  option.originH ||65;

		this._dirIndex = 0;

		this._imgSrc = option.imgSrc || '';
	},

	//渲染当前动画
	render: function( ctx ) {// 把自己画 到画布上去
		//第一步： 把图片加载
		var img = new Image();
		img.src = this._imgSrc;

		var self = this;

		img.onload = function() {
			var frameIndex = 0;
			// this == img
			// 第二步：加载完图片后，　启动一个　时钟，不停的渲染动画
			setInterval(function(){
				ctx.clearRect( 0,0 , ctx.canvas.width , ctx.canvas.height);
				ctx.drawImage(
					img //绘制的原始图片
					, frameIndex * self.originW  // 剪切图片的x坐标
					, self._dirIndex * self.originH
					, self.originW
					, self.originH
					, self.x
					, self.y
					, self.w
					, self.h
				);

				frameIndex ++ ;
				frameIndex %= 4;
			}, 1000 / self.fps)
		}
	},

	//改变方向
	changeDir: function( dir ) {
		if( dir == 'left' ) {
			this._dirIndex = 1;
		}

		if( dir == 'right' ) {
			this._dirIndex = 2;
		}


		if( dir == 'up' ) {
			this._dirIndex = 3;
		}

		if( dir == 'down' ) {
			this._dirIndex = 0;
		}
	}
};

2.6.6 补充 sublime制作代码段（推荐--已结讲过了）

第一步：sublime菜单栏→ 工具 → 制作代码段

第二步：修改输出的sublime代码段文本

<snippet>
    <content><![CDATA[
1、这里放要tab键 输出的内容
2、 ${1:this} 占位符，tab可以进行切换，数字是切换的索引。
    ：后面的是默认的文本。
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>简写的字母</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

第三步：保存到插件的文件夹中，后缀名为：.sublime-snippet 比如我存放的位置：
C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets
snippets是我自己新建的文件夹。

Web前端学习笔记——Canvas 01

一、canvas简介

1.1 什么是canvas？（了解）

1.2 canvas主要应用的领域（了解）

二、canvas绘图基础

2.0 sublime配置canvas插件（推荐）

2.1 Canvas标签

2.1.1 canvas标签语法和属性 （重点）

2.1.2 浏览器不兼容处理（重点）

2.2 canvas绘图上下文context

2.2.1 Context：Canvas的上下文、绘制环境。（重点掌握）

2.3 基本的绘制路径（重点）

2.3.1 canvas坐标系

2.3.2 设置绘制起点(moveTo)

2.3.3 绘制直线(lineTo)

2.3.4 路径开始和闭合

2.3.5 描边(stroke)

2.3.7 填充(fill)

2.3.8 快速创建矩形rect()方法

2.3.9 快速创建描边矩形和填充矩形

2.3.10 清除矩形(clearRect)

2.4 绘制圆形（arc)

2.5 绘制文字（会使用就可以了）

2.5.1 绘制上下文的文字属性 （有印象就行了）

2.5.2 上下文绘制文字方法

2.5.3 案例饼状图绘制文字.html

2.6 绘制图片（drawImage） （重点）

2.6.1 基本绘制图片的方式

2.6.2 在画布上绘制图像，并规定图像的宽度和高度

2.6.3 图片裁剪，并在画布上定位被剪切的部分

2.6.4 用JavaScript创建img对象

2.6.5 面向对象基础复习补充：

2.6.6 补充 sublime制作代码段（推荐--已结讲过了）

C＃Web应用程序入门经典学习笔记之一

C＃Web应用程序入门经典学习笔记之二

学习web前端面试如何才能通过

html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

python网络编程学习笔记(六)：Web客户端访问

react学习笔记_01-jsx

毕业生想学习web前端，应该怎么学才能最快找到工作？

HTML5移动开发学习笔记之Canvas基础

python web框架学习笔记

【Django入门】学习笔记01

2.1.1 canvas标签语法和属性（重点）

2.5.1 绘制上下文的文字属性（有印象就行了）

2.6 绘制图片（drawImage）（重点）