canvas简介

1.1什么是canvas？
①：canvas是HTML5提供的一种新标签<canvas></canvas>
②：HTML5 <canvas>标签元素用于图形的绘制，经过脚本 (一般是JavaScript)来完成。
③：<canvas>标签只是图形容器，必须使用脚原本绘制图形。
Canvas是一个矩形区域的画布，能够用JavaScript在上面绘画。控制其每个像素。---其默认在页面上得的大小是width:300px; height:100px;
canvas标签使用JavaScript在网页上绘制图像，自己不具有绘图功能。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5以前的web页面只能用一些固定样式的标签：好比p、div、h1等，但有了canvas Web页面能够能够丰富多彩。
1.2 canvas主要应用的领域
1.游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。
2.可视化数据.数据图表话，
3.banner广告：Flash曾经辉煌的时代，智能手机还不曾出现。如今以及将来的智能机时代，HTML5技术可以在banner广告上发挥巨大做用，用Canvas实现动态的广告效果再合适不过。
4.将来=>模拟器：不管从视觉效果仍是核心功能方面来讲，模拟器产品能够彻底由JavaScript来实现。
5.将来=>远程计算机控制：Canvas可让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
6.将来=>图形编辑器：Photoshop图形编辑器将可以100%基于Web实现。
7.其余可嵌入网站的内容(多用于活动页面、特效)：相似图表、音频、视频，还有许多元素可以更好地与Web融合，而且不须要任何插件。
8.完整的canvas移动化应用
9.canvas的标准：
最新标准：http://www.w3.org/TR/2dcontext/
稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
目前来讲，标准还在完善中。先用早期的api足够完成全部的应用

2、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="myCanvas">
您的浏览器不支持canvas，请升级浏览器，显示此行文本。
</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向下增大
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部分：
你的浏览器不支持canvas，请升级浏览器
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(); //描边路径
·综合案例：02绘制定位表格.html
·综合案例：03画画板.html
2.3.7填充(fill)
*语法：ctx.fill();
*解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。
*注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。
如下是非0环绕原则的原理：（了解便可，很是少会用到复杂的路径）
“非零环绕规则”是这么来判断有自我交叉状况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，
使此线段的终点彻底落在路径范围以外。
图2-14中的那三个箭头所描述的就是上面这个步骤。
接下来，将计数器初始化为0，
而后，每当这条线段与路径上的直线或曲线相交时，
就改变计数器的值。若是是与路径的顺时针部分相交，则加1，
若是是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，
浏览器就会对其进行填充。
若是最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了
*案例：04填充矩形.html
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);
*解释：清除某个矩形内的绘制的内容，至关于橡皮擦。
2.4绘制圆形（arc)
·概述：arc()方法建立弧/曲线（用于建立圆或部分圆）。
o语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
oarc:弧（度）弧形物；天穹 英[ɑːk]美[ɑrk]
ocounter反击，还击；反向移动，对着干；反驳，回答['kaʊntə]美['kaʊntɚ]
o解释：
§x,y：圆心坐标。
§r：半径大小。
§sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。
§eAngel:结束的角度，注意是弧度。π
§counterclockwise：是不是逆时针。true是逆时针，false：顺时针
§弧度和角度的转换公式：rad = deg*Math.PI/180;
§在Math提供的方法中sin、cos等都使用的弧度
·案例：05绘制圆形.html
·案例：06绘制饼状图.html
2.5绘制文字（会使用就能够了）
2.5.1绘制上下文的文字属性 （有印象就好了）
·font设置或返回文本内容的当前字体属性
ofont属性使用的语法与CSS font属性相同。
例如：ctx.font = "18px '微软雅黑'";
·textAlign设置或返回文本内容的当前对齐方式
ostart :默认。文本在指定的位置开始。
oend :文本在指定的位置结束。
ocenter:文本的中心被放置在指定的位置。
oleft :文本左对齐。
oright :文本右对齐。
*例如：ctx.textAlign = 'left';
·textBaseline设置或返回在绘制文本时使用的当前文本基线
oalphabetic： 默认。文本基线是普通的字母基线。
otop： 文本基线是em方框的顶端。。
ohanging： 文本基线是悬挂基线。
omiddle： 文本基线是em方框的正中。
oideographic： 文本基线是em基线。
obottom： 文本基线是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案例07文字绘制.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：绘制图片的高度
若是指定宽高，最好成比例，否则图片会被拉伸
等比公式：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() {
//图片加载完成后，执行此方法
}
·
·案例：08绘制图片.html
·案例：09绘制图片裁剪.html
·案例：10序列帧动画.html
3、canvas进阶
3.1 Canvas颜色样式和阴影
3.1.1设置填充和描边的颜色（掌握）
·fillStyle :设置或返回用于填充绘画的颜色
·strokeStyle:设置或返回用于笔触的颜色
以上两个值均可以接受颜色名,16进制数据，rgb值，甚至rgba.通常先进行设置样式而后进行绘制。
例如：
ctx.strokeStyle = "red";
ctx.strokeStyle = "#ccc";
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeStyle = "rgba(255,0,0,6)";
3.1.2设置阴影（了解，少用，性能差）
·类比于CSS3的阴影。
·shadowColor： 设置或返回用于阴影的颜色
·shadowBlur： 设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
·shadowOffsetX： 设置或返回阴影距形状的水平距离
·shadowOffsetY： 设置或返回阴影距形状的垂直距离
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);
例如：
·案例：12设置box盒子阴影.html
·设置png图片的阴影，图片透明部分不会被投影。
3.2复杂样式（了解）
3.2.1建立线性渐变的样式（了解）
·通常不用，都是用图片代替，canvas绘制图片效率更高。
·线性渐变能够用于矩形、圆形、文字等颜色样式
·线性渐变是一个对象
·语法：ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0起始坐标，x1,y1结束坐标
例如：
//建立线性渐变的对象，
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); //添加一个渐变颜色，第一个参数介于0.0与1.0之间的值，表示渐变中开始与结束之间的位置。
grd.addColorStop(1,"white"); //添加一个渐变颜色
ctx.fillStyle =grd; //关键点，把渐变设置到 填充的样式
案例13设置线性渐变.html
3.2.2设置圆形渐变（径向渐变） 了解
·建立放射状/圆形渐变对象。能够填充文本、形状等
·context.createRadialGradient(x0,y0,r0,x1,y1,r1);
·radial半径的；放射状的；光线的；光线状的 英['reɪdɪəl]美['redɪəl]
·参数详解：
ox0:渐变的开始圆的x坐标
oy0:渐变的开始圆的y坐标
or0:开始圆的半径
ox1:渐变的结束圆的x坐标
oy1:渐变的结束圆的y坐标
or1:结束圆的半径
var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
rlg.addColorStop(0, 'teal'); //添加一个渐变颜色
rlg.addColorStop(.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg;//设置 填充样式为延续渐变的样式
ctx.fillRect(100, 100, 500, 500);
·案例14圆形渐变.html
3.2.3绘制背景图（了解）
·ctx.createPattern(img,repeat)方法在指定的方向内重复指定的元素了解
·pattern：n.模式；图案；样品 英['pæt(ə)n]美['pætɚn]
·第一参数：设置平铺背景的图片，第二个背景平铺的方式。
oimage： 规定要使用的图片、画布或视频元素。
orepeat： 默认。该模式在水平和垂直方向重复。
orepeat-x： 该模式只在水平方向重复。
orepeat-y： 该模式只在垂直方向重复。
ono-repeat： 该模式只显示一次（不重复）。
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;//把背景图设置给填充的样式
ctx.fill();
·案例15背景图填充.html
3.3变换（重点）
3.3.1缩放（重点）
·scale()方法缩放当前绘图，更大或更小
·语法：context.scale(scalewidth,scaleheight)
oscalewidth :缩放当前绘图的宽度(1=100%, 0.5=50%, 2=200%,依次类推)
oscaleheight :缩放当前绘图的高度(1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
·案例16缩放案例.html
3.3.2位移画布（重点）
·ctx.translate(x,y)方法从新映射画布上的(0,0)位置
·参数说明：
·x： 添加到水平坐标（x）上的值
·y： 添加到垂直坐标（y）上的值
·发生位移后，至关于把画布的0,0坐标 更换到新的x,y的位置，全部绘制的新元素都被影响。
·位移画布通常配合缩放和旋转等。
·案例：17位移画布.html
3.3.3旋转（重点）
·context.rotate(angle);方法旋转当前的绘图
·注意参数是弧度（PI）
·如需将角度转换为弧度，请使用degrees*Math.PI/180公式进行计算。
·案例：18旋转画布.html
3.3绘制环境保存和还原（重要）
·ctx.save()保存当前环境的状态
o能够把当前绘制环境进行保存到缓存中。
·ctx.restore()返回以前保存过的路径状态和属性
o获取最近缓存的ctx
·通常配合位移画布使用。
·案例：19矩形旋转案例.html
3.4设置绘制环境的透明度（了解）
·context.globalAlpha=number;
·number:透明值。必须介于0.0（彻底透明） 与1.0（不透明） 之间。
·设置透明度是全局的透明度的样式。注意是全局的。
3.5画布限定区域绘制（了解）
·ctx.clip();方法从原始画布中剪切任意形状和尺寸
·一旦剪切了某个区域，则全部以后的绘图都会被限制在被剪切的区域内（不能访问画布上的其余区域）
·通常配合绘制环境的保存和还原。
3.6画布保存base64编码内容（重要）
·把canvas绘制的内容输出成base64内容。
·语法：canvas.toDataURL(type, encoderOptions);
·例如：canvas.toDataURL("image/jpg",1);
·参数说明：
otype，设置输出的类型，好比image/png image/jpeg等
oencoderOptions：0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为：image/jpeg或者image/webp才起做用。
案例1：
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.7画布渲染画布（重要）
·context.drawImage(img,x,y);
·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.8了解：线条样式（了解）
·lineCap设置或返回线条的结束端点(线头、线冒)样式
obutt： 默认。向线条的每一个末端添加平直的边缘。
§翻译.：屁股；烟头；笑柄；靶垛；粗大的一端 英[bʌt]美[bʌt]
oround： 向线条的每一个末端添加圆形线帽。
osquare： 向线条的每一个末端添加正方形线帽。
参考：23线的样式.html
·lineJoin设置或返回两条线相交时，所建立的拐角类型
obevel:建立斜角。
§翻译.斜角；斜面；[测]斜角规 英['bev(ə)l]美['bɛvl]
oround:建立圆角。
omiter:默认。建立尖角
·lineWidth设置或返回当前的线条宽度
·miterLimit设置或返回最大斜接长度
o意思:斜接 英['maɪtə]
o斜接长度指的是在两条线交汇处内角和外角之间的距离。
o通常用默认值：10就能够了。除非须要特别长的尖角时，使用此属性。
3.9了解贝塞尔曲线（知道有）
3.9.1绘制一条二次方曲线。
·微软的画图板中的曲线的颜色。
·quadratic：二次方的意思， 英[kwɒ'drætɪk]美[kwɑ'drætɪk]
·Curve：曲线的意思， 英[kɜːv]美[kɝv]
·语法：context.quadraticCurveTo(cpx,cpy,x,y);
·参数：
ocpx： 贝塞尔控制点的x坐标
ocpy： 贝塞尔控制点的y坐标
ox： 结束点的x坐标
oy： 结束点的y坐标
ctx.beginPath();
ctx.moveTo(20,20);
//绘制2次方曲线，贝赛尔曲线
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
3.9.2绘制贝塞尔曲线（知道有）
·绘制一条三次贝塞尔曲线
·语法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
·提示：三次贝塞尔曲线须要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。若是路径不存在，那么请使用beginPath()和moveTo()方法来定义开始点。
·参数说明：
ocp1x： 第一个贝塞尔控制点的x坐标
ocp1y： 第一个贝塞尔控制点的y坐标
ocp2x： 第二个贝塞尔控制点的x坐标
ocp2y： 第二个贝塞尔控制点的y坐标
ox:结束点的x坐标
oy:结束点的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();
·案例：25绘制贝塞尔曲线.html
3.10了解建立两条切线的弧（知道有）
·在画布上建立介于当前起点和两个点造成的夹角的切线之间的弧
·语法：context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。
·例如：ctx.arcTo(240, 100, 240, 110, 40);
·参数：
ox1:弧的端点1的x坐标
oy1:弧的端点1的y坐标
ox2:弧的端点2(终点)的x坐标
oy2:弧的端点2(终点)的y坐标
or :弧的半径
//代码demo：
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.11了解判断点是否在路径中（知道有）
context.isPointInPath(x,y);
//isPointInPath()方法返回true，若是指定的点位于当前路径中；不然返回false。
//判断x,y坐标的点是否在当前的路径中。
3.12了解文本宽度计算（知道有）
context.measureText(text).width;
3.13若是之后作canvas游戏方向开发深刻学习能够扩展内如下容：
·setTransform()将当前转换重置为单位矩阵。而后运行transform()
·transform()替换绘图的当前转换矩阵
·globalCompositeOperation设置或返回新图像如何绘制到已有的图像上
·像素操做
4、Canvas开发库封装
4.1封装经常使用的绘制函数
4.1.1封装一个矩形
//思考：咱们用到的矩形须要哪些绘制的东西呢？
一、矩形的x、y坐标
二、矩形的宽高
三、矩形的边框的线条样式、线条宽度
四、矩形填充的样式
五、矩形的旋转角度
六、矩形的缩小放大
//下面是把上面全部的功能进行封装的代码：
function ItcastRect( option ) {//矩形构造函数
this._init(option);
}
ItcastRect.prototype = { //矩形的原型对象
_init: function( option ) { //初始化方法
option = option || {};
this.x = option.x === 0 ? 0 : option.x || 100;
this.y = option.y === 0 ? 0 : option.y || 100;
this.w = option.w || 100;
this.h = option.h || 100;
this.angle = option.angle === 0 ? 0 : option.angle || 0;
this.fillStyle = option.fillStyle || 'silver';
this.strokeStyle = option.strokeStyle || 'red';
this.strokeWidth = option.strokeWidth || 4;
this.scaleX = option.scaleX || 1;
this.scaleY = option.Y || 1;
},
render: function( ctx ) {//把矩形渲染到canvas中
ctx.save();
ctx.translate( this.x, this.y );//位移画布
ctx.rotate( this.angle * Math.PI / 180 );//旋转角度
ctx.scale( this.scaleX, this.scaleY );//缩放
ctx.fillStyle = this.fillStyle;
ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
ctx.lineWidth = this.strokeWidth; //线宽
ctx.strokeStyle = this.strokeStyle; //填充样式
ctx.strokeRect( 0,0,this.w,this.h ); //描边样式
ctx.restore();
},
constructor: ItcastRect
};
4.1.2做业：尝试着封装一个圆形？
//封装圆形的代码的答案：不要偷看
function ItcastCircle( option ) {
this._init( option );
}
ItcastCircle.prototype = {
_init: function( option ) {
option = option || {};
this.x = option.x === 0 ? 0 : option.x || 100;
this.y = option.y === 0 ? 0 : option.y || 100;
this.w = option.w || 100;
this.h = option.h || 100;
this.angle = option.angle === 0 ? 0 : option.angle || 0;
this.fillStyle = option.fillStyle || 'silver';
this.strokeStyle = option.strokeStyle || 'red';
this.strokeWidth = option.strokeWidth || 4;
this.scaleX = option.scaleX || 1;
this.scaleY = option.Y || 1;
this.opactity = option.opactity || 1;
this.counterclockwise =
option.counterclockwise === true ? true : option.counterclockwise || false;
this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
this.startAngle = this.startAngle * Math.PI/180;
this.endAngle = this.endAngle * Math.PI / 180;
this.r = option.r || 100;
},
render: function( ctx ) {
ctx.save();
ctx.translate( this.x, this.y);
ctx.scale( this.scaleX, this.scaleY );
ctx.rotate( this.agnle * Math.PI / 180 );
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.fillStyle;
ctx.strokeStyle = this.strokeStyle;
ctx.moveTo(0, 0);
ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise);
ctx.fill();
ctx.stroke();
ctx.restore();
},
constructor: ItcastCircle
};
4.2第三方库使用
·Rgraph vs百度的echart
https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/
·国产的egret引擎
http://www.egret-labs.org/
·比较火的3d引擎：treejs
http://threejs.org/
·Konva
官网：http://konvajs.github.io/
特色：
*小巧、使用方便、适合移动端和pc端
*支持丰富的事件处理操做
*支持相似JQuery的操做方式（顺带能复习jQueyr）
*开源，能够随意更改
*社区更新比较活跃，github托管源码
*性能也不错
·其余的还有不少，但愿之后能用到大家的库。
5、Konva的使用快速上手
5.1 Konva的总体理念
·舞台的概念的引入。整个视图看作是一个舞台stage
·舞台中能够绘制不少个层layer
·layer下面能够有不少的group
·group下面能够有 矩形、图片、其余形状等
·参看：快速上手文档---查看翻译文档
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
Shape
5.2 Konva矩形案例
5.2.1建立一个矩形：Konva.Rect(option);
//Konva使用的基本案例
//第一步：建立舞台
var stage = new Konva.Stage({
container: 'container', //须要存放舞台的Dom容器
width: window.innerWidth, //设置全屏
height: window.innerHeight
});
//第二步：建立层
var layer = new Konva.Layer(); //建立一个层
stage.add(layer); //把层添加到舞台
//第三步： 建立矩形
var rect = new Konva.Rect({ //建立一个矩形
x: 100, //矩形的x坐标，相对其父容器的坐标
y: 100,
width: 100, //矩形的宽度
height: 100, //矩形高度
fill: 'gold', //矩形填充的颜色
stroke: 'navy', //矩形描边的颜色
strokeWidth: 4, //填充宽度
opactity: .2, //矩形的透明度
scale: 1.2, //矩形的缩放1：原来大小
rotation: 30, //旋转的角度，是deg不是弧度。
cornerRadius: 10, //圆角的大小（像素）
id: 'rect1', //id属性，相似dom的id属性
name: 'rect',
draggable: true //是否能够进行拖拽
});
//建立一个组
var group = new Konva.Group({
x: 40,
y: 40,
});
group.add( rect ); //把矩形添加到组中
//第四步： 把形状放到层中
layer.add( group ); //把组添加到层中
layer.draw(); //绘制层到舞台上
5.3 Konva的动画系统
5.3.1 tween对象(重点)
·tween，英文意思：二者之间， 英[twiːn]美[twin]
·tween是控制Konva对象进行动画的核心对象。
·tween能够控制全部数字类型的属性进行动画处理，好比：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等
//案例：
var tween = new Konva.Tween({
node: rect, //要进行动画的Konva对象
x: 300, //要进行动画的属性
opacity: .8,
duration: 1, //持续时间
easing: Konva.Easings.EaseIn, //动画的动画效果
yoyo: true, //是否进行循环播放的设置
onFinish: function() {
//动画执行结束后，执行此方法
}
});
tween.play(); //启动动画
·tween的控制方法
otween.play(), //播放动画
otween.pause(), //暂停动画
otween.reverse(), //动画逆播放
otween.reset(), //重置动画
otween.finish(), //当即结束动画
oseek：英文：寻找 英[siːk]美[sik]
·tween的缓动控制选项
oKonva.Easings.Linear //线性
oKonva.Easings.EaseIn //缓动，先慢后快
oKonva.Easings.EaseOut //先快后慢
oKonva.Easings.EaseInOut //两头慢，中间快
oKonva.Easings.BackEaseIn //往回来一点，而后往前冲，汽车启动相似...
oKonva.Easings.BackEaseOut
oKonva.Easings.BackEaseInOut
oKonva.Easings.ElasticEaseIn //橡皮筋 英[ɪ'læstɪk]美[ɪ'læstɪk]
oKonva.Easings.ElasticEaseOut
oKonva.Easings.ElasticEaseInOut
oKonva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回 英[baʊns]美[baʊns]
oKonva.Easings.BounceEaseOut
oKonva.Easings.BounceEaseInOut
oKonva.Easings.StrongEaseIn //强力
oKonva.Easings.StrongEaseOut
oKonva.Easings.StrongEaseInOut
·动画效果参考：29Konva动画缓动效果案例.html
5.3.2动画to的使用
·to就是对tween的封装，比较简单好用。
//案例：
var rect = new Konva.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fill: 'red'
});
layer.add(rect);
layer.draw();
//动画系统
rect.to({
x: 100,
y: 100,
opactity: .1,
duration: 3,
onFinish: function() {
}
});
//to:就是对tween的简单应用。
5.3.3 Animate的应用
·Animation动画，实际上就是浏览器通知开发者进行绘制，并提供当前的时间
var anim = new Konva.Animation(function(frame) {
//动画系统提供的frame有三个属性可使用：
var time = frame.time, //动画执行的总时间
timeDiff = frame.timeDiff, //距离上一帧的时间
frameRate = frame.frameRate; //帧率（既1000/间隔时间）
//动画的动做
}, layer);
anim.start();//启动动画
//anim.stop();//结束动画
5.3.4循环播放动画的实现
//整体思路，使用tween配合onFinish事件中从新播放动画，达到循环播放的效果
var loopTween = new Konva.Tween({
node: star, //设置要表现动画的Konva对象
rotation: 360, //旋转360度
duration: 2, //动画持续时间
easing: Konva.Easings.Linear,
onFinish: function() {
// this === loopTween //true
this.reset();//重置动画
this.play(); //从新播放动画
}
});
loopTween.play();
5.3.5回放且循环播放动画
·yoyo属性能够进行对动画进行播放完后，回放当前动画，并持续循环来回切换播放。
rect.to({
duration: 2,
scale: 1.5,
yoyo: true//此设置也能够用于tween
});
5.3.6进度条案例
·三角函数的补充
oMath.sin(弧度); //夹角对面的边 和 斜边的比值
oMath.cos(弧度); //夹角侧边 与斜边的比值
·圆形上面的点的坐标的计算公式
ox =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
oy =y0 + Math.sin(rad) * R;//注意都是弧度
·group的灵活运用
okonva的group很灵活，每一个group都有本身的坐标系
ogroup能够包含其余的group，能够对group作整个组的动画
ogroup能够经过getChidren();//能够拿到直接子级元素。
var group = new Konva.Group({
x: 0,
y: 0
});
group.add(rect);
5.4 Konva的事件（重要）
var rect = new Konva.Rect({
x: 100,
y: 100,
fill: 'red',
width: 200,
height: 200
});
//绑定事件Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend
rect.on('click', function(){ //jQuery如出一辙！！
console.log('^_^ ^_^');
});
//绑定多个事件
rect.on('click mousemove',function(e){
});
//解除绑定事件
rect.off('click'); //这不是jQuery吗？
//触发事件
rect.fire('click');
//取消事件冒泡
rect.on('click', function(evt) {
alert('You clicked the circle!');
evt.cancelBubble = true; //取消事件冒泡
});
5.5 Konva的选择器
·选择方法。
oID选择法：stage.find('#id'); //此方法返回的是一个数组
oname选择法：group.findOne('.name');//返回一个Konva对象
otype选择法：group.find('Circle');//查找全部的圆形Konva对象
//组中查找圆形的Konva对象
groupCircle.find('Circle').each(function( circle, index ){
circle.setZIndex( 3 - index );
});
5.6饼状图案例
·wedge:楔形
5.7柱状图案例
·histogram n. [统计]直方图；柱状图 英['hɪstəgræm]美['hɪstəɡræm]
6、Canvas项目实战
7、Canvas优化
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
var canvas, context, toggle;
init();
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
}
function animate() {
requestAnimFrame( animate );
draw();
}
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 192 + 256;
var y = Math.cos( time * 0.9 ) * 192 + 256;
toggle = !toggle;
context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}