原创 學習 PixiJS — 視覺效果

平鋪精靈 平鋪精靈是一種特殊的精靈，可以在一定的範圍內重複一個紋理。你可以使用它們創建無限滾動的背景效果。要創建平鋪精靈，需要使用帶有三個參數的 TilingSprite 類（PIXI.extras.TilingSprite） 用法： le

2019-02-03 08:55:08 22

原创 學習 PixiJS — 粒子效果

你如何創造火，煙，魔法和爆炸等效果？你製作了許多小精靈，幾十，幾百，甚至上千個精靈。然後對這些精靈應用一些物理效果，使它們的行爲類似於你嘗試模擬的元素。你還必須給他們一些關於它們應該如何出現和消失以及應該形成什麼樣的模式的規則。這些微小的精

2019-01-22 08:55:08 2

原创 學習 PixiJS — 精靈狀態

精靈狀態 如果你有複雜的遊戲角色或交互式對象，你可能希望該角色根據遊戲環境中發生的情況，以不同的方式運行。每個單獨的行爲稱爲狀態。如果你在精靈上定義狀態，那麼只要遊戲中出現與該狀態相對應的事件，就可以觸發這些狀態。比如，通過鍵盤的方向鍵控制

2019-01-19 17:42:40 2

原创 學習 PixiJS — 動畫精靈

說明 看完官方教程中提到的這本書 — Learn Pixi.js ，準備寫寫讀後感了，官方教程中所說的內容，基本上就是書的前4章，所以我就從第5章開始寫寫吧。 動畫精靈指的是按順序使用一系列略有不同的圖像，創建的精靈，之後一幀一幀的播放這些

2019-01-14 08:52:40 23

原创 開始學習 PixiJS

PixiJS 介紹 PixiJS 是一個超快的2D渲染引擎。它自動偵測使用 WebGL 或者 Canvas。開發者無需專門學習 WebGL 就能感受到強大的硬件加速的力量。 PixiJS 會幫助你用 JavaScript 或者其他 HTM

2018-11-26 20:55:13 10

原创 關於 ES6 中 Promise 的面試題

說明 最近在複習 Promise 的知識，所以就做了一些題，這裏挑出幾道題，大家一起看看吧。 題目一 const promise = new Promise((resolve, reject) => { console.log(1)

2018-10-30 11:54:49

原创 用 canvas 的 getImageData 做點有趣的事

說明 canvas元素標籤強大之處在於可以直接在HTML上進行圖形操作，具有極大的應用價值。 canvas 可以實現對圖像的像素操作，這就要說到 getImageData() 方法了。 解釋 CanvasRenderingContext2D

2018-09-18 18:45:23

原创 JavaScript中的函數重載（Function overloading）

說明 JavaScript 中沒有真正意義上的函數重載。 函數重載 函數名相同，函數的參數列表不同(包括參數個數和參數類型)，根據參數的不同去執行不同的操作。 我們舉個例子看看 function overload(a){ co

2018-09-02 07:54:34 3

原创 一個浪漫又悲情的愛情故事——笛卡爾心形線

說明 寫這篇文章是因爲某天看到這樣一個公式 r=a(1-cosθ) ，我上網搜了下，原來是笛卡爾心形線的極座標方程，這個方程裏面的確有一個浪漫又悲情的愛情故事，感興趣的朋友可以點這裏看看，而至於這個故事是真是假，這 並不重要。 而這篇文章

2018-09-02 07:54:33 6

原创 JavaScript實現冒泡排序 可視化

說明 上次寫了 JavaScript實現冒泡排序 ，只是簡單的說了冒泡排序算法是什麼，怎麼實現，這次來實現將冒泡排序的過程展現出來。 解釋 先來個簡單的版本，看效果圖 實現這個效果，思路是這樣的 1、先將需要排序的數組，進行冒泡排序

2018-09-02 07:54:33

原创 畢業一年了 — 是時候反思反思了

寫這篇文章是想反思反思畢業後的這第一年，這篇文章不會提任何的技術，但是講的笑話會挺多。 開始正文 離開校園，步入社會後，我到的第一家公司是一家創業公司，有趣的是，某一段時間，我的辦公室變得非常的大，我估算應該是有 400 平米了，恩，

2018-09-02 07:54:33

原创 JavaScript實現 滿天星 導航欄

說明 分享一個滿天星導航欄的效果，代碼不多，但效果挺好看，先看看效果圖吧。 解釋 實現這個效果，需要掌握的知識不用很多，知道簡單的CSS，會用JS 獲取元素， 能綁定事件基本就足夠了。 好的，我們直接來看代碼，註釋已經寫的很詳細了

2018-09-02 07:54:33 2

原创 canvas實現漂亮的下雨效果

說明 這篇文章說如何用canvas畫出漂亮的下雨效果，先看看最後實現的效果吧。 效果圖 解釋 看圖來分析下，我們需要實現哪些效果。 1、雨滴下落效果，移動鼠標控制下落方向 2、雨滴下落散成小水珠，小水珠的移動方向和鼠標移動方向

2018-09-02 07:54:33 3

原创 CSS中用 opacity、visibility、display 屬性將 元素隱藏 的 對比分析

說明 opacity 用來設置透明度 display 定義建立佈局時元素生成的顯示框類型 visibility 用來設置元素是否可見。 opacity、visibility、display 這三個屬性分別取值 0、hidden、

2018-09-02 07:54:33 1

原创 小程序—九宮格心形拼圖

說明 前幾天在朋友圈看到好幾次這種圖片。 這種圖片，是用九張圖片拼成的一個心形。 感覺很有趣，就上網查了查怎麼做，大部分的說法就是用美圖秀秀的拼圖功能來做， 在微信小程序中也有專門做心形拼圖的小程序，我都試了試之後，感覺還可以更加

2018-09-02 07:54:33 3