HTML5的新标签之一的Canvas

一、 <canvas>简介(了解)

1. 什么是canvas:

是HTML5提供的一种新标签

<canvas></canvas>

 英 ['kænvəs]  美 ['kænvəs]   帆布 画布

Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等，但有了canvas Web页面可以可以丰富多彩。
Canvas标签被很多的工程师认为是HTML5最伟大的改进之一，因为它可以让我们在不使用图片的情况下实现网页的图形设计。
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。
<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。

2. <canvas>的历史

3. 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>初识（重点）

1. <canvas>的初体验：

2. <canvas>标签语法和属性

2.1 语法

canvas：画布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
标签名canvas，需要进行闭合。就是一普通的html标签。
跟所有的html标签一样，要写在body标签之内。
注意：
- 不要用CSS控制它的宽和高,会让图片拉伸，
- 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
- 可以给canvas画布通过style属性设置其它属性（背景色，边框。。。。）
- width和hegiht：默认300*150像素
- ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
- 只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
- 移动端的兼容情况非常理想，基本上随便使用
- 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
- 如果浏览器不兼容，最好进行友好提示
  - 得到canvas的上下文对象（是所有的绘制操作api的入口或者集合，相当于是得到画布的控制权，之后便可以通过js在画布上画内容了）
  - 后面的参数是字符串的“2d”,2d表示当前的画布支持2D绘图，如果希望将当前画布支持3d，则传入”webgl”（3d在ie中只有ie11才支持，3d一般应用在3D模型和场景，这里不讨论）

2.2 注意点

3. 浏览器不兼容的处理

 例如：

    <canvas id="cavsElem">

        你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本

    </canvas>

三、 <canvas>的应用（重点）

1. 基本方法：

1.1 getContext（“2d”）

var canvas  = document.getElementById( 'cavsElem' ); //获得画布

var ctx = canvas.getContext( '2d' );//注意：2d小写， 3d：webgl

2. 基本的绘制路径（重点）

2.1 canvas坐标系

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

2.2 设置绘制起点(moveTo)

* 语法：ctx.moveTo(x, y);

* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置

* 参数：x,y 都是相对于 canvas盒子的最左上角。

* 注意：**绘制线段前必须先设置起点，不然绘制无效。**

2.3 绘制直线(lineTo)

* 语法：ctx.lineTo(x, y);

* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。

* 参数：x,y 线头点坐标。

2.4 路径开始和闭合

* 开始路径：ctx.beginPath();

* 闭合路径：ctx.closePath();

* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。

* beginPath: 核心的作用是将 不同绘制的形状进行隔离，

  每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

2.5 描边(stroke)

* 语法：ctx.stroke();

* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

* stroke: （用笔等）画；轻抚；轻挪；敲击；划尾桨；划掉；（打字时）击打键盘

 英 [strəʊk]   美 [strok]

2.6 填充(fill)

* 语法：ctx.fill();

* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

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

    以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）

    “非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，

    使此线段的终点完全落在路径范围之外。

    图2-14中的那三个箭头所描述的就是上面这个步骤。

    接下来，将计数器初始化为0，

    然后，每当这条线段与路径上的直线或曲线相交时，

    就改变计数器的值。如果是与路径的顺时针部分相交，则加1，

    如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，

    浏览器就会对其进行填充。

    如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了

* 案例： 04填充矩形.html

2.7 路径的一些属性：

2.7.1 strokeStyle

设置路径的描边样式

2.7.2 fillStyle

设置路径的填充样式

以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba.一般先进行设置样式然后进行绘制。

例如：

ctx.strokeStyle = "red";
ctx.strokeStyle = "#ccc";
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeStyle = "rgba(255,0,0,6)";

2.7.3 lineWidth

设置路径的宽度

2.8 案例：表格绘制.html

3. 绘制矩形（重点）

3.1 快速创建矩形（rect）

* 语法：ctx.rect(x, y, width, height);

* 解释：x, y是矩形左上角坐标， width和height都是以像素计

* rect方法只是规划了矩形的路径，并没有填充和描边。

* 改造案例：04填充矩形.html

*rect: abbr. 矩形（rectangular）；收据（receipt）

3.2 快速创建描边矩形和填充矩形（strokeRect、fillRect）

* 语法： ctx.strokeRect(x, y, width, height);

    - 参数跟3.1相同，注意此方法绘制完路径后立即进行stroke绘制

* 语法：ctx.fillRect(x, y, width, height);

    - 参数跟3.1相同， 此方法执行完成后。立即对当前矩形进行fill填充。

3.3 清除矩形（clearRect）

* 语法：ctx.clearRect(x, y, width, hegiht);

* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

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等都使用的弧度
  - 案例：05绘制圆形.html
  - 案例：06绘制饼状图.html

5. 绘制文字（重点）

5.1 上下文绘制文字方法（重点）

5.1.1 在画布上绘制“被填充的”文本（fillText）

* 语法：ctx.fillText(text,x,y,maxwidth);

* 解释：text是输出的文本， x, y是矩形左上角坐标， maxWidth（可选）允许的最大文本宽度，以像素计

* fillText方法在画布上绘制填色的文本。文本的默认颜色是黑色。

效果图：

5.1.2 在画布上绘制文本（strokeText）（无填充）

* 语法：ctx.strokeText(text,x,y,maxwidth);

* 解释：text是输出的文本， x, y是矩形左上角坐标， maxWidth（可选）允许的最大文本宽度，以像素计

* strokeText方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

效果图：

5.1.3 在画布上绘制文本（measureText）（无填充）

* 语法：ctx.measureText(text).width;

* 解释：text是要得到宽度的文本

* measureText 方法返回包含一个对象，该对象包含以像素计的指定字体宽度

* 单词：measure 测量；估量；权衡   英 ['meʒə]   美 ['mɛʒɚ]

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

font 设置或返回文本内容的当前字体属性
- font 属性使用的语法与 CSS font 属性相同。
- textAlign 设置或返回文本内容的当前对齐方式
  - start : 默认。文本在指定的位置开始。
  - end : 文本在指定的位置结束。
  - center: 文本的中心被放置在指定的位置。
  - left : 文本左对齐。
  - right : 文本右对齐。

例如：ctx.font = "18px '微软雅黑'";

    * 例如：ctx.textAlign = 'left';

textBaseline 设置或返回在绘制文本时使用的当前文本基线
- alphabetic ：默认。文本基线是普通的字母基线。
- top ：文本基线是字符的顶端。。
- hanging ：文本基线是悬挂基线。
- middle ：文本基线是字符的正中。
- ideographic：文本基线是字符基线。
- bottom ：文本基线是字符的底端。

    例如： ctx.textBaseline = 'top';

    单词:

     alphabetic: 字母的；照字母次序的   [,ælfə'bɛtɪk]

     ideographic：表意的；表意字构成的   英 [,ɪdɪəʊ'ɡræfɪk]   美 [,ɪdɪə'græfɪk]

5.3 综合案例：

    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 );        //填充文字

效果图：

5.4 案例：文字绘制.html

5.5 绘制图片（重点）

5.5.1 基本绘制图片的方式

* 语法：context.drawImage(img,x,y);

* 解释：x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

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

* 语法：context.drawImage(img,x,y,width,height);

* 解释：width 绘制图片的宽度，  height：绘制图片的高度

* 如果指定宽高，最好成比例，不然图片会被拉伸</em>

    等比公式：  toH = Height * toW   /  Width;  //等比

             设置高 = 原高度 * 设置宽/ 原宽度;

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

* 语法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

* 解释：

    sx,sy 裁剪的左上角坐标，

    swidth：裁剪图片的高度。 sheight:裁剪的高度

    其他同上

5.5.4 用JavaScript创建img对象

第一种方式：

   var img = document.getElementById("imgId");

第二种方式：

    var img = new Image();//这个就是 img标签的dom对象

    img.src = "imgs/arc.gif";

    img.alt = "文本信息";

    img.onload = function() {

        //图片加载完成后，执行此方法

五、 <canvas>补充api(其它方法)：

1. Canvas颜色样式

fillStyle : 设置或返回用于填充绘画的颜色
strokeStyle : 设置或返回用于笔触的颜色

以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba.一般先进行设置样式然后进行绘制。

例如：

ctx.strokeStyle = "red";
ctx.strokeStyle = "#ccc";
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeStyle = "rgba(255,0,0,6)";
shadowColor ：设置或返回用于阴影的颜色
shadowBlur ：设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
shadowOffsetX：设置或返回阴影距形状的水平距离
shadowOffsetY：设置或返回阴影距形状的垂直距离

2. 设置阴影（了解，少用，性能差）

示例代码：

ctx.fillStyle = "rgba(255,0,0, .9)"

ctx.shadowColor = "teal";

ctx.shadowBlur = 10;

ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 10;

ctx.fillRect(100, 100, 100, 100);

3. 复杂样式（了解）

3.1 创建线性渐变的样式（了解）

注意点：

一般不用，都是用图片代替，canvas绘制图片效率更高。
线性渐变可以用于矩形、圆形、文字等颜色样式
线性渐变是一个对象
ctx.createLinearGradient(x0,y0,x1,y1);

n x0:起点的横坐标

n y0:起点的纵坐标

n x1:结束点的横坐标

n y1:结束点的纵坐标

示例：

//创建线性渐变的对象，

var grd=ctx.createLinearGradient(0,0,170,0);

grd.addColorStop(0,"black"); //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

grd.addColorStop(1,"white"); //添加一个渐变颜色

ctx.fillStyle =grd; //关键点，把渐变设置到填充的样式

3.2 设置圆形渐变（径向渐变）（了解）

创建放射状/圆形渐变对象。可以填充文本、形状等

n 语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);

n x0:渐变的开始圆的横坐标

n y0:渐变的开始圆的纵坐标

n r0:渐变的开始圆的半径

n x0:渐变的结束圆的横坐标

n y0:渐变的结束圆的纵坐标

n r0:渐变的结束圆形的半径

radial 半径的；放射状的；光线状的英 ['reɪdɪəl] 美 ['redɪəl]
ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素

3.3 绘制背景图（了解）

n image ：规定要使用的图片、画布或视频元素。

n repeat ：默认。该模式在水平和垂直方向重复。

其它值：

u repeat ：默认。该模式在水平和垂直方向重复。

u repeat-x ：该模式只在水平方向重复。

u repeat-y ：该模式只在垂直方向重复。

u no-repeat：该模式只显示一次（不重复）。

pattern：n. 模式；图案；样品英 ['pæt(ə)n] 美 ['pætɚn]
- scale() 方法缩放当前绘图，更大或更小
- 语法：context.scale(scalewidth,scaleheight)

3.4 变换（重点）

3.4.1 缩放（重点）

n scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)

n scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
translate() 方法重新映射画布上的 (0,0) 位置
语法：context.translate(x,y)

3.4.2 位移画布（重点）

n x：添加到水平坐标（x）上的值

n y：添加到垂直坐标（y）上的值

注意：发生位移后，相当于把画布的0,0坐标更换到新的x,y的位置，所有绘制的新元素都被影响。
rotate() 方法旋转当前的绘图
语法：context.rotate(angle)

3.4.3 旋转（重点）

n angle：参数是弧度（PI）

注意：如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

3.4.4 绘制环境保存和还原（重要）

context.save() 保存当前环境的状态（可以把当前绘制环境进行保存到缓存中）
context.restore() 返回之前保存过的路径状态和属性(获取最近缓存的ctx)

注意：一般配合位移画布使用。

3.4.5 设置绘制环境的透明度（了解）

context.globalAlpha=number;

n number:透明值。必须介于 0.0（完全透明)与 1.0（不透明）之间。

注意：设置透明度是全局的透明度的样式。注意是全局的。

3.4.6 画布限定区域绘制（了解）

clip() 方法从原始画布中剪切任意形状和尺寸
语法：context.clip()

n 没有参数

注意：

² 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。

² 一般配合绘制环境的保存和还原。

位移画布一般配合缩放和旋转等

3.4.7 画布保存base64编码内容（重要）

toDataURL() 把canvas绘制的内容输出成base64内容。
语法：canvas.toDataURL(type, encoderOptions);

n type：设置输出的类型，比如 image/png image/jpeg等

n encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。

代码：

var canvas = document.getElementById("canvas");

var dataURL = canvas.toDataURL();

console.log(dataURL);

// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby

// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

var img = document.querySelector("#img-demo");//拿到图片的dom对象

img.src = canvas.toDataURL("image/png");

3.4.8 画布渲染画布（重要）

drawImage() 在一个画布上画
语法：context.drawImage(img,x,y)

n img ：也可以是画布，也就是把一个画布整体的渲染到另外一个画布上。

代码：

var canvas1 = document.querySelector('#cavsElem1');

var canvas2 = document.querySelector('#cavsElem2');

var ctx1 = canvas1.getContext('2d');

var ctx2 = canvas2.getContext('2d');

ctx1.fillRect(20, 20, 40, 40); //在第一个画布上绘制矩形

ctx2.drawImage(canvas1, 10, 10); //将第一个画布整体绘制到第二个画布上

3.4.9 了解：线条样式（了解）

lineCap ：设置或返回线条的结束端点(线头、线冒)样式

n butt ：默认。向线条的每个末端添加平直的边缘。

u butt - 翻译.：屁股；烟头；笑柄；靶垛；英 [bʌt] 美 [bʌt]

n round ：向线条的每个末端添加圆形线帽。

n square：向线条的每个末端添加正方形线帽。

lineJoin ：设置或返回两条线相交时，所创建的拐角类型

n bevel: 创建斜角。

u bevel - 翻译. 斜角；斜面英 ['bev(ə)l] 美 ['bɛvl]

n round: 创建圆角。

n miter: 默认。创建尖角

lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度

² 意思: 斜接英 ['maɪtə]

² 斜接长度指的是在两条线交汇处内角和外角之间的距离。

² 一般用默认值：10就可以了。除非需要特别长的尖角时，使用此属性。

3.4.10 了解贝塞尔曲线（知道有）

绘制一条二次贝塞尔曲线:

quadraticCurveTo()二次贝塞尔曲线
quadratic：二次方的意思，英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]
Curve：曲线的意思，英 [kɜːv] 美 [kɝv]
语法： context.quadraticCurveTo(cpx,cpy,x,y);

参数：

² cpx：贝塞尔控制点的 x 坐标

² cpy：贝塞尔控制点的 y 坐标

² x ：结束点的 x 坐标

² y ：结束点的 y 坐标

ctx.beginPath();

ctx.moveTo(20,20);

//绘制2次方曲线，贝赛尔曲线

ctx.quadraticCurveTo(20,100,200,20);

ctx.stroke();

绘制一条三次贝塞尔曲线

bezierCurveTo():绘制一条三次贝塞尔曲线
语法： context.quadraticCurveTo(cpx,cpy,x,y);

参数：

² cp1x：第一个贝塞尔控制点的 x 坐标

² cp1y：第一个贝塞尔控制点的 y 坐标

² cp2x：第二个贝塞尔控制点的 x 坐标

² cp2y：第二个贝塞尔控制点的 y 坐标

² x ：结束点的 x 坐标

² y ：结束点的 y 坐标

//绘制复杂的贝塞尔曲线

ctx.beginPath();

ctx.moveTo(400,400);

//参数说明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

// cp1x：第一个贝塞尔控制点的 x 坐标

// cp1y：第一个贝塞尔控制点的 y 坐标

// cp2x：第二个贝塞尔控制点的 x 坐标

// cp2y：第二个贝塞尔控制点的 y 坐标

// x: 结束点的 x 坐标

// y: 结束点的 y 坐标

ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);

ctx.stroke();

3.4.11 了解创建两条切线的弧（知道有）

arcTo在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧
quadratic：二次方的意思，英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]
Curve：曲线的意思，英 [kɜːv] 美 [kɝv]
语法： context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。

参数：

² x1: 弧的端点1的 x 坐标

² y1: 弧的端点1的 y 坐标

² x2: 弧的端点2(终点)的 x 坐标

² y2: 弧的端点2(终点)的 y 坐标

² r : 弧的半径

代码：

ctx.beginPath();

ctx.moveTo(20,20);

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(200,100);

//context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。

ctx.arcTo(240, 100, 240, 110, 40);

ctx.lineTo(240, 300);

ctx.stroke();

3.4.12 了解判断点是否在路径中（知道有）

context.isPointInPath(x,y);

//isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。

//判断x,y坐标的点是否在当前的路径中。

3.4.13 了解文本宽度计算（知道有）

context.measureText(text).width;
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
transform() 替换绘图的当前转换矩阵
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
像素操作

3.5 如果以后做canvas游戏方向开发深入学习可以扩展内以下容：

六、 konva库的学习：

在开发过程中，为了提高开发效率。简化开发过程，通常会用一些别人封装好的一些库来编写代码。konva就是其中一个。

1. Konva的整体理念

舞台的概念的引入。整个视图看做是一个舞台 stage
舞台中可以绘制很多个层 layer
layer下面可以有很多的group
group下面可以有矩形、图片、其他形状等
参看：快速上手文档---查看翻译文档
https://konvajs.github.io/

HTML5的新标签之一的Canvas

一、 <canvas>简介(了解)

1. 什么是canvas:

2. <canvas>的历史

3. canvas主要应用的领域

二、 <Canvas>初识（重点）

1. <canvas>的初体验：

2. <canvas>标签语法和属性

2.1 语法

2.2 注意点

3. 浏览器不兼容的处理

三、 <canvas>的应用（重点）

1. 基本方法：

1.1 getContext（“2d”）

2. 基本的绘制路径（重点）

2.1 canvas坐标系

2.2 设置绘制起点(moveTo)

2.3 绘制直线(lineTo)

2.4 路径开始和闭合

2.5 描边(stroke)

2.6 填充(fill)

2.7 路径的一些属性：

2.7.1 strokeStyle

2.7.2 fillStyle

2.7.3 lineWidth

2.8 案例：表格绘制.html

3. 绘制矩形（重点）

3.1 快速创建矩形（rect）

3.2 快速创建描边矩形和填充矩形（strokeRect、fillRect）

3.3 清除矩形（clearRect）

4. 绘制圆形（arc）（重点）

5. 绘制文字（重点）

5.1 上下文绘制文字方法（重点）

5.1.1 在画布上绘制“被填充的”文本 （fillText）

5.1.2 在画布上绘制文本（strokeText）（无填充）

5.1.3 在画布上绘制文本（measureText）（无填充）

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

5.3 综合案例：

5.4 案例：文字绘制.html

5.5 绘制图片（重点）

5.5.1 基本绘制图片的方式

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

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

5.5.4 用JavaScript创建img对象

五、 <canvas>补充api(其它方法)：

1. Canvas颜色样式

2. 设置阴影（了解，少用，性能差）

3. 复杂样式（了解）

3.1 创建线性渐变的样式（了解）

3.2 设置圆形渐变（径向渐变）（了解）

3.3 绘制背景图（了解）

3.4 变换（重点）

3.4.1 缩放（重点）

3.4.2 位移画布（重点）

3.4.3 旋转（重点）

3.4.4 绘制环境保存和还原（重要）

3.4.5 设置绘制环境的透明度（了解）

3.4.6 画布限定区域绘制（了解）

3.4.7 画布保存base64编码内容（重要）

3.4.8 画布渲染画布（重要）

3.4.9 了解：线条样式（了解）

3.4.10 了解贝塞尔曲线（知道有）

3.4.11 了解创建两条切线的弧（知道有）

3.4.12 了解判断点是否在路径中（知道有）

3.4.13 了解文本宽度计算（知道有）

3.5 如果以后做canvas游戏方向开发深入学习可以扩展内以下容：

六、 konva库的学习：

1. Konva的整体理念

5.1.1 在画布上绘制“被填充的”文本（fillText）

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