原创 記一次“失利後”經過半年準備通過阿里社招的經歷與感悟

寫在最前 本次分享一下在作者上一次“失利”即拿到畢業證第二天突然“收到”阿里社招面試通知失敗之後,通過分析自己的定位與實際情況,做出的未來一到兩年的規劃。以及本次社招的面試經歷(但這部分不是重點,每個人的面試經歷都是不一樣的。千人千面嘛)

原创 canvas進階——實現靜態圖像的變形併合成動態效果

寫在最前 在之前的這篇bezierMaker.js——N階貝塞爾曲線生成器的文章中我們提到了對於高階貝塞爾公式的繪製與生成。不過更多的童鞋看到後可能會不知道其使用場景是什麼。故作者本次分享一下基於bezierMaker.js實現的將靜態圖

原创 貝塞爾公式推導與物體跟隨複雜曲線的軌跡運動

寫在最前 在之前的這篇文章中我們提到了對於貝塞爾公式的運用。本次分享一下如何推導貝塞爾公式以及附一個簡單的��即小球跟隨曲線軌跡運動。 歡迎關注我的博客,不定期更新中—— 效果預覽 demo地址 對於如何繪製連續的貝塞爾曲線可以參照這篇

原创 canvas實現高階貝塞爾曲線

寫在最前 由於原生的Canvas最高只支持到三階貝塞爾曲線,那麼我想添加多個控制點怎麼辦呢?(即便大部分複雜曲線都可以用3階貝塞爾來模擬)與此同時,關於貝塞爾控制點的位置我們很難非常直觀的清楚到底將控制點設置爲多少可以形成我們想要的曲線。

原创 由一個“bug”到鮮爲人知的jQuery.cssHooks

寫在最前 本次分享一下在一次jQuery賦值樣式失效的結果中來分析背後原因的過程。在翻jQuery源碼的過程中,感覺真是還不能說自己只是會用jQuery,我好像連會用都達不到(逃 歡迎關注我的博客,不定期更新中—— 一個很簡單的賦值問題

原创 用canvas實現視頻播放與彈幕功能

寫在最前 本次分享一下使用canvas來進行視頻播放並且添加彈幕功能。 歡迎關注我的博客,不定期更新中—— 效果圖 示例源碼見:源碼地址 可以看到上方爲一段視頻,下面是用canvas來重新繪製的視頻,並且支持動態的添加彈幕。 canv

原创 基於canvas使用粒子拼出你想要的文字

寫在最前 本次分享一下使用canvas實現粒子效果拼出你想要的文字。 歡迎關注我的博客,不定期更新中—— 起因 不久之前看到大搜車團隊出品的easy mock產品的界面中有一個使用粒子拼出“mock so easy”的效果,感覺非常有意思

原创 初識JavaScript依賴注入

寫在最前 本次分享一下我學習到的有關依賴注入的梳理與總結。試圖生動形象得解釋出來其內部的思想與實現流程。 歡迎關注我的博客,不定期更新中—— 什麼是依賴注入 第一次聽到這個說法是在angular的時候,我們都知道angular內部大量使用

原创 初探Node.js Stream中Readable類的內部實現

寫在最前 本次試圖淺析探索Nodejs的Stream模塊中對於Readable類的一部分實現(可寫流也差不多)。其中會以可讀流兩種模式中的paused mode即暫停模式的表現形式來解讀源碼上的實現,爲什麼不分析flowing mode自

原创 基於canvas使用粒子拼出你想要的文字[2]——粒子的動畫效果

寫在最前 本次分享一個用canvas粒子渲染文字的“完整”版實現,功能包括:隨機粒子緩動動畫,粒子匯聚、發散,並拼出你想要的文字。本文繼續上面一節基於canvas使用粒子拼出你想要的文字的基礎效果,完善了在文字拼接過程中的粒子效果。 歡迎

原创 基於canvas使用貝塞爾曲線平滑擬合折線段

寫在最前 本次分享一下在canvas中將繪製出來的折線段的棱角“磨平”,也就是通過貝塞爾曲線穿過各個描點來代替原有的折線圖。 歡迎關注我的博客,不定期更新中—— 爲什麼要平滑擬合折線段 先來看下Echarts下折線圖的渲染效果: 一

原创 JavaScript中奇特的~運算符

寫在最前 本次分享一下並不是很常用的按位非運算符~的原理以及一點點用法。 歡迎關注我的博客,不定期更新中—— JavaScript小衆系列開始更新啦 ——何時完結不確定,寫多少看我會多少!這是已經更新的地址: 小衆系列之按位

原创 基於node實現文件路徑替換

寫在最前 本次分享一個簡易路徑替換工具。功能很簡單,重點在於掌握: 遞歸遍歷文件夾目錄正則替換目標內容解壓上傳文件,返回更新後的壓縮文件源碼地址:https://github.com/Aaaaaaaty/Blog/tree/mast

原创 對於浮動的定義我遺漏了什麼

寫在最前 本次記錄一段突然令我困惑的css代碼。主要是由於css一直掌握的不好同時突然出現了一種很常見的浮動情況但是並不能用已有的認知來解釋,故從規範中尋找答案。 歡迎關注我的博客,不定期更新中—— MDN對於浮動的解釋 The flo

原创 基於casperjs、resemble.js實現一個像素對比服務

寫在最前 本次分享一個提供設計稿與前端頁面進行像素對比的node服務,旨在爲測試或者前端人員自己完成一個輔助性測試。相信我,在像素級別的對比下,網頁對設計稿的還原程度一下子就會凸顯出來。。如果哪位童鞋用這個功能測了某位前端小哥哥的頁面