把前端应用部署到GitHub

1. 使用npm安装create-react-app

2. 使用create-react-app创建一个前端项目

3. 执行npm run build会生成一个文件夹build下面会有编译后的静态文件

4. 利用gh-pages将上一步的静态文件发布到GitHub,如果没有仓库,先新建一个仓库,这里用gh-pages-test

5. 配置package.json.添加 <”homepage”: “https://username.github.io/repositoryName",>

6. 修改package.json中的script代码:< “predeploy”: “npm run build”,”deploy”: “gh-pages -d build” >

7. 使用npm安装gh-pages

8. 执行npm run deploy 这里需要等待一会,然后查看仓库分支gh-pages可以看到上传的内容,也可以通过 https://username.github.io/repositoryName访问到

阅读更多

canvas 长按保存图片

1
2
3
需求: 将HTML5的内容保存为图片
思路: 通过Canvas绘图生成base64图片,长按即可保存到本地
问题: canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩

阅读更多

cocoscreater_微信小游戏排行榜

接入微信小游戏的子域

微信小游戏为了保护其社交关系链数据,增加了子域的概念,子域又叫 开放数据域,是一个单独的游戏执行环境。子域中的资源、引擎、程序,都和主游戏完全隔离,开发者只有在子域中才能访问微信提供的 wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 两个 API,用于实现一些例如排行榜的功能。由于子域只能在离屏画布 sharedCanvas 上渲染,因此需要我们把 sharedCanvas 绘制到主域上。

阅读更多

cocoscreater_触摸事件类型和事件对象

触摸事件类型和事件对象
触摸事件在移动平台和桌面平台都会触发,这样做的目的是为了更好得服务开发者在桌面平台调试,只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下:

阅读更多

cocoscreater_动作

基础动作类型
Action:所有动作类型的基类。
FiniteTimeAction:有限时间动作,这种动作拥有时长 duration 属性。
ActionInstant:即时动作,这种动作立即就会执行,继承自 FiniteTimeAction。
ActionInterval:时间间隔动作,这种动作在已定时间内完成,继承自 FiniteTimeAction。
ActionEase:所有缓动动作基类,用于修饰 ActionInterval。
EaseRateAction:拥有速率属性的缓动动作基类。
EaseElastic:弹性缓动动作基类。
EaseBounce:反弹缓动动作基类。

阅读更多

cocos_creator笔记

cocoster 使用过程知识点
1.重复执行某个动画,需要重新调用repeatForever()方法;不能直接在action后面以链式的方式添加repeatForever()
ex: var seq = aciton;
var repeat = seq.repeatForever();
2.如果需要使用cc.loader.loadRes()动态加载资源考虑的资源url兼容问题 ,亲测creater1.9版本,将需要动态加载的资源放在assets/resources下面。如果一份资源不需要由脚本直接动态加载,那么千万不要放在 resources 文件夹里。
3.手动设置Node节点的层级别node.setSiblingIndex();
4.cocosCreater在使用过程中,同一个变量都会有缓存,而且很厉害。为了避免这样可以将变量名改动一下。
5.关于Animation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var animation = this.node.getComponent(cc.Animation);
// 注册
animation.on('play', this.onPlay, this);
// 取消注册
animation.off('play', this.onPlay, this);
// 对单个 cc.AnimationState 注册回调
var anim1 = animation.getAnimationState('anim1');
anim1.on('lastframe', this.onLastFrame, this);

// 动态创建 Animation Clip:
var animation = this.node.getComponent(cc.Animation);
// frames 这是一个 SpriteFrame 的数组.
var clip = cc.AnimationClip.createWithSpriteFrames(frames, 17);
clip.name = "anim_run";
clip.warpMode = cc.WarpMode.Loop;

// 添加帧事件
clip.events.push({
frame: 1, // 准确的时间,以秒为单位。这里表示将在动画播放到 1s 时触发事件
func: "frameEvent", // 回调函数名称
params: [1, "hello"] // 回调参数
});

animation.addClip(clip);
animation.play('anim_run');

阅读更多

修改input type=radio的默认样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
input[type=radio] {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
-webkit-appearance: none;
background-color: transparent;
border: 0;
outline: 0 !important;
line-height: 20px;
color: #d8d8d8;
}
input[type=radio]:after {
content: "";
display:block;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 14px;
font-size: 16px;
color: #fff;
border: 3px solid #ddd;
background-color: #fff;
box-sizing:border-box;
}
input[type=radio]:checked:after {
content: "L";
transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
border-color: #099414;
background-color: #099414;
}

阅读更多

css3通过border-radius画半圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.circle1 {
width: 100px;
height: 200px;
border: 1px solid black;
border-radius: 100% 0 0 100%/50%;
border-right: none;
}
.circle2 {
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 50% 50% 0 0/100% 100% 0 0;
border-bottom: none;
}
.circle3 {
width: 100px;
height: 200px;
border: 1px solid black;
border-radius: 0 100% 100% 0/50%;
border-left: none;
}
.circle4 {
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 0 0 50% 50%/0 0 100% 100% ;
border-top: none;
}

阅读更多

createjs.timer

tweenjs版的 setTimeout 与 setInterval API,目的是 createjs.Ticker.paused 可以同步操作 setTimeout/setInterval
要保证 createjs 有 tweenjs 模块。
setTimeout/cleatTimeout/setInterval/clearInterval 都挂载在 createjs 全局对象上。

阅读更多

《Egret系列教程黑白块开发一》

阅读更多