canvas、cocos基础知识

canvas基础

基本操作

context.save()//保存状态
context.restore()//回复状态
context.moveTo()//开始点
context.lineTo()//画直线
context.beginPath()//开始一条新路径
context.closePath()//闭合一条路径
context.lineWidth//线宽
context.strokeStyle//边颜色
context.fillStyle//填充颜色
context.lineCap//线端点样式 butt round square
context.lineJoin//连接点样式 miter bevel round
context.arc()//画圆
var a=context.createLinearGradient(x,y,x0,y0)//线性渐变
a.addColorStop(stop,color)//渐变颜色
var a= context.createRadialGradient(x0 , y0 , r0 , x1 , y1 , r1 );//径向渐变
var a=context.createPattern(imgage,repeat-style)//图案描边填充
context.shadowColor//阴影颜色
context.shadowOffSetX//左阴影
context.shadowOffSetY//右阴影
context.shadowBlur//模糊度
context.globalAlpha//透明度
context.translate()//坐标系平移
context.ratate()//坐标系旋转
context.scale()//坐标系缩放
context.font字体设置 weight size family
context.fillText填充字体
context.strokeText描边字体
context.textAlign文本水平对齐
context.textBaseline文本垂直对齐

图像操作

context.drawImage(image,dx,dy)
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
//(dx,dy指图片在画布中位置，dh,dx指的是图片的大小，sx,sy,sw,sh指的是截取源图片的具体位置)

canvas动画（bom下的requestAnimationFrame）

//开始动画 
var animHandle;
var anim = function(){
   
    //。。。循环操作
	animHandle = requestAnimationFrame(anim);
};
requestAnimationFrame(anim);
//取消动画
cancelAnimationFrame(animHandle);

使用cocos2d

cocos2d是常用的游戏开发引擎，他有很多分支，关系如下：

cocos2d----cocosBuilder
	   |---cocos2D-iphone----cocos2d-windows
	   					 |---cocos2d-android
	   					 |---cocos2d-javascrippt
	   					 |---cocos2d-X----cocos2d-HTML5
	   								  |---cocos2d-xna 			

此处主要介绍的cocos2d-javascript分支，他是开源跨平台游戏引擎，采用原生js开发，课发布到web平台、ios、android等平台。

环境需求：python环境、cocos环境

常用cocos命令

cocos new -l js --no-native project_name   ##创建项目
cocos run -p web   ##运行cocos项目

在新建项目中的诸多目录中，res是存放各种图片的，src是存放各种源代码的

在src中resource.js是设置引入各种外部资源的配置文件，app.js是逻辑代码。

基本功能

基本概念有导演(Director)、场景(Scene)、层(layer)、精灵(sprite)、ui组件。

其中ui组件包括标签、菜单、按钮、复选框、进度条、滑动条、文本框。

对于每一个对象中，常用到的概念还有坐标系、节点的概念。

除此之外还有动作、动画、定时器（this.schedule）。

设置手机适配度

cc.view.setDesignResolutionSize(750, 1334, cc.ResolutionPolicy.FIXED_WIDTH);

创建导演(Director)、场景(Scene)、层(layer)、精灵(sprite)

cc对象，为顶层对象，所有操作都是在cc对象的操作之上。

在cc.game.onStart=()=>{}中完成预设，cc.game.run()运行程序。

cc.game.onStart = function(){
   
    if(!cc.sys