分析：拿到设计稿后我们首先要做的是分析此图该用哪种技术实现？第一步：应该使用定位实现图中的文本和静态元素第二步：难点分析；需要动态展现数据流。这里因为动画很简单，所以选择svg实现。第三步：布局，以及排版；把设计稿先固定宽高，以后通过缩放实现适配。

看到跳动的音符你难道不想知道它是如何实现的么？开撸！问：实现这个有什么用呢？答：装杯用！😥其实这个操作能实现音频效果器。就是主播开麦后大妈声音变成少女，男人声音可以变女声！😱因为音频分析器可以拿到音频的频谱，既可以改变音调啊音色啊什么的就可以实现音频效果器！🐷不想看我啰嗦的直接看最后，有整体html+js...

实现输入 这里我们可以想到使用textarea，但textarea无法支持富文本。因此排除！顾使用div的contenteditable属性；如下： {代码...} 这样此div就是一个可编辑div了，且内部可以使用富文本；如下： {代码...} 可以看到标签内的“#我是红色#”呈现红色状态。

上面的布局方案主要是要理解flex-shrink为0表示不会被压缩，配合上height为0，flex为1一起就表示永远会占满剩下的区域，不会超出也不会被压缩。这样不用使用定位方式可以轻松实现这种布局，当然也可以用在移动端，例如现在的饿了么，美团外卖等这种类型的布局，直接可以通过上面代码实现。

<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas> 标签只有两个属性—— width和height。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺...

前言： {代码...} 闲谈： {代码...} nodejs安装： {代码...} smart-npm优化下载速度： {代码...} webpack全局安装： {代码...} 新建项目： {代码...} 一直按回车；完成后现在项目里面就有一个package.json， 我们多加一点东西；建立以下文件： {代码...} 添加了两个js文件，添加了最重要的webpack->webpack.config.js...