最近在学习WebAssembly，因为是提升性能，所以一直在使用canvas 做一些尝试。今天就突发奇想以前看见的抖音多帧延迟的装饰，今天就来分析实现下。

多帧延迟

先简单分析下这个效果，假设咱们有一个视频是宽400x300， 分为100个40x30的小方格，用固定的时间间隔播放格子。

• 视频顺序播放

async function initVideo() {
        const stream = await navigator.mediaDevices.getUserMedia({
                video: {
                    width:400,
                    height:300
                }
            });
        video = document.querySelector('video');
        video.srcObject = stream;
        video.addEventListener('loadeddata', function(){
            video.play()
            cs.width = video.videoWidth;
            cs.height = video.videoHeight;
            drawCanvas(video);
        }, false);
        });
}

• 创建数组Array(100);

  let w = Math.floor(cs.width/obj.w);
  let h = Math.floor(cs.height/obj.h);
  list = new Array(w*h);

更多

Memory

Linear memory 是 WebAssembly 的另外一种构建块，通常用于表示编译的 C/C++ 应用程序的整个堆。从 JavaScript 的角度，linear memory（后面称作 memory）可以被认为是一个可以调整大小的 ArrayBuffer，它是通过尽心优化的，用于负载和存储的低开销沙箱。

Memories 可以被 JavaScript 创建，需要提供出初始大小和最大的大小这些选项。

var memory = new WebAssembly.Memory({initial:10, maximum:100});

更多

接触ts之后你应该会注意到，所有的声明都会增加类型

 let n:number=1
 let s:string = '1'
 function m():void{};

那么问题来了,可以进行如下操作吗？

更多

函数类型

//声明函数
function handle(x,y) {
    return x*y
}

//函数表达式
const handle = function(x,y){
    return x*y
}

在ts中函数也是需要定义类型的，

基础

更多

进入正题前，大家有没有碰见过类似的情况

switch (type) {
    case 1:

     break;
    caes 2:
     ...

    case 5:

}

当你第一写的时候或许能清楚地记得，但是过一两天回来再看，或者有迭代的时候。
有人说了注释，确实注释是个好的做法， 注释好比是两个人的沟通，有时候注释很清楚地理解，有时候则可能理解不到位。

更多

元组的学习

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

元组起源于函数编程语言（如 F#），这些语言中会频繁使用元组。

查看例子

定义一对值分别为 string 和 number 的元组：

let val: [string, number, boolean] = ['ibeeger', 1, true];

更多

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法

<类型>值

或

值 as 类型

在 tsx 语法（React 的 jsx 语法的 ts 版）中必须用后一种。

更多

今天开始学习 typescript ，坚持每一天更新一篇。

什么是接口

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

更多

今天闲来无事，复习下数学公式，直角坐标系中的，计算圆的x，y坐标

• 勾股定理

let deg = (2*Math.PI/360)*stars[i]['deg'];
let x = point.x + Math.sin(hd)*r;
let y = point.y + Math.cos(hd)*r;

更多

上一篇介绍了无标签播放音频，本篇增加些音效效果，主要的api

• audioContext.createBiquadFilter

主要设置 frequency, Q两个值 （频率，质量）

    const filter = audioContext.createBiquadFilter();
    filter.frequency.value = number; //取值范围 小于800
    filter.Q.value =  number; //小于1000

常用的类型主要有：

• lowpass（低通滤波）
• highpass（高通滤波）
• bandpass（带通滤波）

filter.type = 'lowpass'

更多