【结构记忆】
canvas绘制的基本步骤：
第一步：获得上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();
第六步：绘制描边 =>ctx.stroke();
ctx.rect(x,y,width,height); //创建矩形
ctx.strokeRect(x, y, width, height); //描边矩形 方法绘制完路径后立即进行stroke绘制
ctx.fillRect(x, y, width, height); //填充矩形 立即对当前矩形进行fill填充
ctx.clearRect(x, y, width, hegiht); //清除矩形
【绘制圆形
ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
// x,y：圆心坐标
// sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大
// counterclockwise：是否是逆时针。true是逆时针，false：顺时针(默认)
// 弧度和角度的转换公式 rad = deg*Math.PI/180;
【绘制文字
ctx.strokeText( "left", 450, 400 ); //描边文字
ctx.fillText( "Top-g", 100, 300 ); //填充文字
ctx.font = '20px "微软雅黑"'; //设置字体
ctx.textBaseline = "bottom"; //设置字体底线对齐绘制基线
ctx.textAlign = "end"; //设置字体对齐的方式 (饼状图文字常用)
【文字阴影
ctx.shadowColor //文字阴影
ctx.shadowBlur //模糊范围
ctx.shadowOffsetX = -10; //水平偏移量
ctx.shadowOffsetY = 20; //垂直偏移量
【绘制图片（重点）
ctx.drawImage(img,x,y); // x,y 图片距离画布左上角坐标
ctx.drawImage(img,x,y,width,height);// width、height 控制图片的宽高
图片裁剪(常用裁剪图片的宽高和画布宽高一样)（重点）
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //swidth、sheight 裁剪图片的宽高
【画布变换
ctx.scale(scalewidth,scaleheight); // 缩放的是整个画布,其里面的绘图也会相应缩放（包括绘图的坐标位置，大小）
ctx.translate(x,y) // 位移画布，重新映射画布上的 (0,0) 位置（位移画布一般配合缩放和旋转等）
ctx.rotate(angle); // 旋转当前的绘图（位移不改变，默认原点为画布0 0）（参数是弧度）
【绘制环境保存和还原（重要）(一般配合位移画布使用)
ctx.save(); //保存当前环境的状态
ctx.restore(); //返回之前保存过的路径状态和属性
【Canvas画布转为base64编码保存（保护数据（防止CANVAS数据泄露））
canvas.toDataURL(type, encoderOptions); //参数可以不写 //type，设置输出的类型，比如 image/png image/jpeg等
//encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者
image/webp才起作用。
【创建线性渐变的样式
ctx.createLinearGradient(x0,y0,x1,y1);
【绘制背景图
ctx.createPattern(img,repeat) //方法在指定的方向内重复指定的元素
【画布绘制画布(优化性能)
ctx2.drawImage(canvas1, 10, 10); //将第一个画布整体绘制到第二个画布上
【行内设置Canvas画布宽高】
1、不要使用css设置canvas宽高，会产生拉伸
【清屏操作】
1、基本 ctx.clearRect(x,y,canvas.width,canvas.height);
2、可以给当前画布一个，宽度或高度 canvas.height = "xxPX"; 也能达到清空画布效果
【canvas获取鼠标坐标】
1、 e.offsetX,e.offsetY (与普通不同，普通是e.clientX)
【img.onload失效问题】
window.onload = function(){
img.onload = function(){console.log(1);} //无法读取1
};
*********************因为JS是先加载页面的标签和图片后再执行 JS代码,不会读取到console.log(1);
【Konva基本写法】
//1.创建舞台
var stage = new Konva.Stage({
width:window.innerWidth,//获取整个页面的宽
height:window.innerHeight, //获取整个页面的高
container:'container'
});
//2.创建层
var layer = new Konva.Layer({});
//将层添加到舞台上
stage.add(layer);
//3.创建组
var group = new Konva.Group({
x:0,
y:0
}
);
//将组添加到层
layer.add(group);
//4.创建演员, 演员就是图形对象
var rect = new Konva.Rect({
...
});
//将演员添加到组
group.add(rect);
//五角星
var star = new Konva.Star({
...
});
group.add(star);
//绘制层
layer.draw();
【Konva对象】
1、Rect
new Konva.Rect（{
x:100, // x,y为起始坐标
y:100,
width:100,
height:100,
stroke:'red', // 边框颜色
strokeWidth:10, // 边框宽度
fill:'gray' // 里面颜色
scaleX:2,
scaleY:2,
rotation:30, //注意:该属性不需要转换成弧度
draggable:true, //拖拽
id:'rect', //起一个id别名
dash:[7, 3] //虚线: 10 线宽 ,5 间隙的宽度
}）
2、wedge
var wedge = new Konva.Wedge({
x:self.x,
y:self.y,
radius:self.innerRadius,
fill:item.color,
angle:tempAngle, //扇形角度
rotation:beginAngle // 旋转角度
});
3、Circle
var Circle = new Konva.Circle({radius: 10});
4、Wedge
var wedge = new Konva.Wedge({
x:self.x,
y:self.y,
radius:self.innerRadius,
fill:item.color,
angle:tempAngle, //扇形角度
rotation:beginAngle // 旋转角度
});
5、Text
var ratioText = new Konva.Text({
x:textX,
y:textY,
text:item.value *100 + "%",
fill:item.color,
fontSize:18
});
6、tween对象(重点)
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的控制方法
tween.play(), //播放动画
tween.pause(), //暂停动画
tween.reverse(), //动画逆播放
tween.reset(), //重置动画
tween.finish(), //立即结束动画
**************************
7、动画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() {
}
});
8、Animation
var anim = new Konva.Animation(function(frame) {
//动画系统提供的frame有三个属性可以使用：
var time = frame.time, // 动画执行的总时间
timeDiff = frame.timeDiff, // 距离上一帧的时间
frameRate = frame.frameRate; // 帧率（既1000/间隔时间）
//动画的动作
}, layer);
【Konva】（注意点）
// 以下都是用konva框架时候注意事项
1、获取宽高 width(),height() eg:stage.width()、obj.width();
2、获取对象的属性: obj.x() // 在属性后面加括号才能获取obj里面的属性
obj.x(value) // 给x属性赋值
3、Konva 很多方法类似JQ的方法 例如.each .on .mouseover ...
eg .getChildren() //获得孩子数组
【FPS】
1、每秒传输帧数 也可以理解为我们常说的“刷新率（单位为Hz）”，fps越高，页面越流畅（CPU性能高）
2、实际fps会有偏差，不会与设定的fps相同
【Simple JavaScript Inheritance】（专门归类封装自写对象到同一个Class里面，达到整合对象所有属性和方法）
1、核心：Class.extend({}) 会让每个对象的隐式原型指向 Class()， 每个对象中相同的方法会覆盖原型中的方法，达到既独立（不会影响其他原型对象中相同属性和方法）且整合（同一个类装载所有对象的属性和方法）的基于类的面向对象思想
*2、理解原型链即可理解该框架的思想，另外的博文 https://my.oschina.net/u/2949632/blog/833597
【中介者模式设计模式】（降低耦合度）
1、每个对象要使用其他对象的方法时，通过中介者去调取
在游戏开发中，game类就是最最核心的中介者，统领着全局，所有的对象，都是game的属性。 比如game有bird属性，有pipe属性。
没有设计模式
【关键字instanceof】（类似typeof）
1、用于判断变量 是否从属于 对象中
eg
person instanceof Person -> true (前提 person 是 Person实例化对象)
person instanceof Object -> true
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
