玉案轩窗的博客

前一段周末学习一下Canvas案例的源码，分析了一下一些案例的实现思路，拓宽一下知识面，并按照案例的实现思路自己实现了下，本系列文章是分享一些觉得有趣的案例以及分析其实现思路。本次分享案例是粒子烟花，该源码在网上有别人分享，该案例是涉及的主要知识点是Canvas方面的知识以及路径计算相关的数学知识，具体实现效果如下： 在本案例中实现的功能：鼠标点击以及拖动创建目标圆环，每一次创建颜色都不相同目

今天本文章分析的是时钟效果，这个案例网上可以说是一搜一大堆，这个案例是之前周末分析源码思路来实现的（没做过该效果，感觉挺不错的就拿来练手了），本案例涉及的技术是Canvas。就正式进入正题了，该案例的实现效果如下： 上个周末再看相关技术文章，看到一个概念叫做VCD分析法，所谓的VCD分析法是指从view(视图结构)、Controller（控制）、Data（数据）三个方面进行一个案例或项目的分析。实

前言之前使用js实现过音乐播放控制条，最终存在几点不如人意的地方，具体的几点如下： 1、存在拖动按钮不流畅 2、时间处理的问题，时间点在播放过程中存在重复的问题本篇文章，采用input range以及progress来实现进度，避免在js实现音乐播放中使用offsetX来确定具体的点击的位置，使用另一种方式来解决js实现音乐播放中产生的问题。 本次实践初衷有两个： 1、js实现音乐

前言html5中提供audio标签, 该标签实现音频的播放，之前就一直对于音频以及视频播放比较感兴趣，一直想要自己实现一个音频和视频播放的模块，这也是本文章撰写的初衷，最近花了些时间实现了Audio播放控制条，从这个小的模块实现也学习到了以前没有接触到的知识。Audio实现思路浏览器原生提供的audio的样式比较简单而且不是太好看，原生提供的样式如下： 自实现的音乐播放控制条, 效果如下： 该音

前言之前通过js实现音频、视频播放，此文是实现音频与歌词同步播放的实现，主要是用于学习实现思想，本文需要想要了解的知识点如下：如何实现音频与歌词同步？如何改变浏览器默认的滚动条样式？ 实现此文实现只专注于实现思想，没有去处理兼容性细节，请使用Chrome来查看，下面主要说说音频与歌词同步的实现思路：歌词文件是.lrc格式的，改文件中的内容形式如下： 从上图中可以看出是由时间点+歌词内容

前言前一段时间分析过require.js源码，整体的分析有些泛泛而，谈内容有些空洞，没有把握住requirejs依赖处理的精髓, 这是分析require.js源码最为失败的地方。虽然没有真正的理解其实现细节，但是对其源码组织以及基本的逻辑执行有了整体的了解。本文是参考网上的源码，分析其思想实现的简易的模块加载器，旨在加深对于require.js的认知与理解。实现思路首先明确的几点如下：每调用一次r

前言最近花了点时间写了个日期控件，首先说说写日期控件的初衷，有两点：第一点是没有写过对于日期的生成不甚了解工作中使用框架的日期控件，但是想要自己实现下该日期控件主要是学习使用，功能不多，支持输出天以及日期范围的选择。实现思路日期控件实现了单日期以及日期范围的功能，单日期实现效果如下图： 日期范围实现效果图如下： 下面主要说说主要的实现思路，首先说说面板日期的生成，日期面板如下图： 日期面

前言快到春节假期了，最近工作上没什么事情，浏览技术文章的时候看见关于俄罗斯方块相关的内容，才会起意实现下俄罗斯方块，主要目的有如下几条：回顾下Js部分的知识学习理解俄罗斯方块游戏的具体实现思想具体实现实现看下具体的实现效果，实现效果如下： 本次实现是简易版的俄罗斯方块包含基本俄罗斯方块的基本功能，本次实现的俄罗斯方块的基本功能有：形状变换满行消除下一个形状提示...

前言视觉差效果是一种比较炫酷的网站效果，最近在GitHub上闲逛的时候，看到视觉差效果相关的插件，就想看看是怎样的实现原理，本文仅仅是实现两种类似视觉差效果，对其实现原理介绍下。具体实现首先看看视觉差效果是什么效果，效果如下： 都设置了256fps，上图中的效果好像不明显，你可以点击这个链接，实际去体验下。实际上视觉差效果有两种体现：动与静的对比都动，但速率不同有速度...