一直感觉canvas很神奇很有趣，趁最近项目少，拿前端之前做的一个静态项目试了下水深，个中的经验和体会记录如下。
1
一、横竖屏转换
1、canvas样式
#canvas {
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
}
1
2
3
4
5
6
7
把canvas缩放定位到屏幕内，以宽高中较小的一边为准。
1
2、横竖屏处理
function config() {
winHeight = window.innerHeight;
winWidth = window.innerWidth;
if (winHeight > winWidth) { // 竖屏
canvas.width = 640;
canvas.height = 1030;
ctx.rotate(Math.PI/2);
ctx.translate(0, -canvas.width);
// posY = -canvas.width;
isVertical = true;
} else { // 横屏
isVertical = false;
canvas.width = 1030;
canvas.height = 640;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
以下敲黑板划重点
canvas画布和可视窗口是两个东西，为了搞明白这个花费了我很大的气力，目前是这么理解的：

姑且理解为可视窗口是个玻璃面板，canvas画布是张A4纸，实际在A4纸上画东西，如上图，旋转90°之后画布在窗口之外，画的东西就看不见了，ctx.translate(0, -canvas.width);相当于在画布上画了东西之后y方向上偏移了-canvas.width位置显示出来。也可以在每个元素绘画的时候y坐标+posY来处理。

在检测到屏幕旋转的时候只要再调用一下初始化的config()方法就可以了，挺方便。

window.onresize = function(){
config();
};
1
2
3
3、取点
touchstart/touchmove/touchend取到的点是窗口的点，2中所画的坐标是画布的坐标系，窗口的坐标不管旋转与否都是不变的，所以横屏的时候拖动的是X轴，竖屏时拖动的是Y轴，取点横竖屏时也不一样。

doc.querySelector(‘.indexPage‘).addEventListener(‘touchstart‘, function(e) {
startX = isVertical ? e.touches[0].clientY : e.touches[0].clientX;
});
1
2
3
二、对js类的初认识
以前对js，基本停留在用它原生的一些方法做一些操作处理，封装的概念也只是提取一些公共的代码独立成方法方便调用而已，感觉和后台语言还是有很大的区别，没接触到js类。这里用到了js的类、对象这些概念：

/**
* 箭头
*/
var Arrow = function() {
this.img = {name: imageData[‘arrow‘], x: 425, y: 500};
};
Arrow.prototype.draw = function() {
if (isMove)
ctx.drawImage(this.img.name, this.img.x + posX, this.img.y + posY);
else
ctx.drawImage(this.img.name, this.img.x, this.img.y + posY);
};
1
2
3
4
5
6
7
8
9
10
11
12
不知道自己的理解准确与否，var Arrow = function(){}即声明了一个类，function()就相当于构造函数，img就是它的一个属性，prototype 属性实现向对象添加属性和方法，像示例代码中就是给这个类添加了一个draw方法，调用时，一样，先实例化对象：var arrow = new Arrow(); 然后就可以调用对象的方法：arrow.draw(); 当然，，方法可以传参。这个项目中基本都是这种方式处理的，把各种元素分出来单独处理可以达到一定的封装作用，方便代码维护和适应需求的变动，不至于把自己弄晕。

三、Howler.js控制音频
很好用，很好用，很好用，重要的事情讲三遍！之前听前端同事经验，音频出现问题是很稀松平常的事情，ios和安卓系统各种情况不一样，特别是ios上不能自动播放音频，一定要认为触碰一下才可以（可能是防止偷用户流量？），处理方式从预先加载后暂停到微信的方法解决不等，遇到这种音频特别多，不同时间需要播放不同几个音频的比较变态的项目来说，用以前的方式（虽然我没有接触过）会比较奔溃。Howler.js使用方式很简单，首先实例化Howl对象：

var bgSound = new Howl({
src: [soundPath + ‘sound/bg.mp3‘],
autoplay: true,
loop: true
});
1
2
3
4
5
播放音频：

bgSound.play();
1
判断音频是否正在播放：

if (bgSound.playing()) {
//balabalabala
}
1
2
3
四、加载页
以前一度觉得加载页是个很神奇的东西，怎么知道加载到了百分之多少，怎么能契合得那么好（一度以为加载页动画只是个假的玩意儿 [捂脸]），现在才知道原来加载基本就是加载图片，而图片加载的过程中是可以监控图片的加载程度的，大概就是这么个意思：

var count = 0, total = resources.length;
function loadPage() {
function loaded() { // 加载完成一次
count++;
percent = count / total * 100; // 计算加载的百分比
if (percent >= 100) {
isLoaded = true;
// 好啦，加载好了，可以愉快玩耍了
}
}