一直感覺canvas很神奇很有趣，趁最近項目少，拿前端之前做的一個靜態項目試了下水深，個中的經驗和體會記錄如下。
1
一、橫豎屏轉換
1、canvas樣式
#canvas {
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
}
把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;
}
}
以下敲黑板划重點
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);
};
不知道自己的理解准確與否，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;
// 好啦，加載好了，可以愉快玩耍了
}
}
for(var i=0; i < total; i++) {
(function(resource){
var img = new Image();
img.onload = function(){
loaded.call(this);
};
img.onerror = function() {
loaded.call(this);
};
img.src = resourcePath + resource[i]['path'];
imageData[resource[i]['name']] = img;
})(resources); // 這里的resources就是所有在加載頁顯示時需要加載的資源
}
}
當然，加載頁需要的資源是要事先加載好的，所以加載頁資源在加載的時候頁面是白屏的，另外，resources強調是加載頁顯示時需要加載的資源是因為有時候為了用戶體驗會分段加載資源，即加載頁結束時並沒有把所需的所有資源加載進去，剩下的資源會在合適的時機控制它加載。
五、requestAnimationFrame()
網上查了很久這個js函數，沒怎么看明白，反正就是一個性能挺好的刷新動畫的方法，主要就是讓canvas畫布不停不停不停地畫，這里是這么用的：
function draw() {
// 實際的畫圖方法
requestAnimationFrame(draw);
}
1
2
3
4
5
六、其他
剩下就是具體的邏輯控制了，類似什么時候播音頻，什么時候走序列幀動畫之類之類的。
==============================================================================
Howler.js是一個不錯的HTML5聲音引擎。功能強大，性能不錯，用起來也很方便。
1. 官網
https://howlerjs.com/ 其代碼托管在GitHub上。
2. 兼容性
Howler默認使用Web Audio，但在IE上可以自動轉為HTML 5 Audio。這點很是貼心。
3. 聲音激活
移動端的Safari和Chrome都禁止網頁自動播放聲音，必須通過用戶的操作，touch, click等觸發。Howler可以設置成自動捕捉用戶操作激活（解禁）聲音播放。
4. 聲音格式
Howler.js支持很多聲音格式以兼容各種瀏覽器。MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.
5. 聲音精靈
Howler 支持聲音精靈。GitHub上的audiosprite， 一個基於ffmpeg的聲音編譯工具（https://github.com/tonistiigi/audiosprite）直接支持生成Howler格式的聲音精靈，而且有諸多參數可選，可同時輸出多種格式，Howler.js可以根據瀏覽器的支持來選擇用哪個聲音格式。注意Howler.js選擇聲音格式的順序是聲音精靈json描述文件的順序，即你生成聲音精靈時寫的順序。
6. 循環點處理
我們自己手動寫的聲音循環在循環一次和下一次的銜接往往有些延遲，造成不連貫，Howler.js對於循環點的處理性能不錯，延遲比較小。
6. 其他特點
支持3D游戲
自動緩存
支持淡入淡出效果
輕量
純JS
無第三方依賴
模塊化
7. 官網上的簡單樣例
7.1 嵌入網頁
<script src="/path/to/howler.js"></script>
<script>
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
</script>
1
2
3
4
5
6
7.2 播放mp3
var sound = new Howl({
src: ['sound.mp3']
});
sound.play();
1
2
3
4
5
7.3 更多播放選項
var sound = new Howl({
src: ['sound.webm', 'sound.mp3', 'sound.wav'],
autoplay: true,
loop: true,
volume: 0.5,
onend: function() {
console.log('Finished!');
}
});
7.4 定義及播放聲音精靈
var sound = new Howl({
src: ['sounds.webm', 'sounds.mp3'],
sprite: {
blast: [0, 3000],
laser: [4000, 1000],
winner: [6000, 5000]
}
});
// Shoot the laser!
sound.play('laser');
7.5 事件監聽
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// Clear listener after first call.
sound.once('load', function(){
sound.play();
});
// Fires when the sound finishes playing.
sound.on('end', function(){
console.log('Finished!');
});
7.6 控制多個聲音
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// Play returns a unique Sound ID that can be passed
// into any method on Howl to control that specific sound.
var id1 = sound.play();
var id2 = sound.play();
// Fade out the first sound and speed up the second.
sound.fade(1, 0, 1000, id1);
sound.rate(1.5, id2);
7.7 使用ES6
import {Howl, Howler} from 'howler';
// Setup the new Howl.
const sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// Play the sound.
sound.play();
// Change global volume.
Howler.volume(0.5);
——————————————
版權聲明：本文為CSDN博主「時間1812」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/time1812/article/details/79184641
調用方法：
<script src="js/howler.js"></script>
<script>
var sound = new Howl({
src: ['one.mp3']
});
function playAudio(){
if(sound.playing()){
sound.pause();
} else {
sound.play();
}
}
</script>