Canvas framework

 

 

應用

 

hoyo 自己的應用

需求為從主機載入一張圖之後,可以增加箭頭、文字、方框等基本的繪圖需求,編輯完成按儲存後要直接回存。

技術:HTML5 Canvas

使用工具:Fabric.js

參考

image-346

 

Web Audio API – 使用

參考

實作

使用 Canvas 繪圖

  • analyser.fftSize
    設定值除以 2 就是陣列取樣數,預設 2048
  • analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));
    數值在 0 – 255 ,沒聲音為 0
  • analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));
    數值在 0 – 255 ,沒聲音為 128
  • requestAnimationFrame 根據瀏覽器設定(一般來說是 60fps) 更新
  • 能量條的高度是根據 0-255 所繪製,所以如果要增減就必須調整 analyser.getByteFrequencyData(array) 的 array 值

image-328

 

RICOH THETA 網頁全景處理

參考

360 Degree Interactive Panoramas And Virtual Tours In Html 5 – Multiple Browsers / 360 Easy – Complete Tutorial On 360 Degree Photography

 

720全景图

 

jQuery Templates – jQuery Templates plugin

jQuery 的模板

為什麼這麼改?

使用官方預設的 <script id=”” type=”text/x-jquery-tmpl”></script> 寫法,PhpStorm 無法解析語法,無法解析語法就代表程式有可能會犯錯

非用 script 不可

如果模板內必須使用到其他功能,那還是必須使用 script tag 才行,調整一下就可以正常執行 jQuery Templates 以及相容 PhpStorm

加上 index

  • http://jsfiddle.net/XCThu/26/

ajax + Json + jQuery Template 應用

 

使用 String() 自幹模板

其實模板講白就是一個預先設計好的結構,使用流程大概是這樣

  1. 設計模板架構
  2. 取用
  3. 替換變動資料

設計模板架構

 

取用

 

替換變動資料

搜尋 {LandCode} 字串,替代成實際從 Json 取得資料

 

jBox 第一次載入圖片無法顯示

jBox 使用 background image 來顯示圖片,在第一次點選圖片時都無法顯示

解決的方式是在第一次載入顯示時,加上 setTimeout()

 

jQuery 的 Selectors 較佳用法

PhpStorm

原JavaScript 語法

警告訊息:

Inefficient jQuery usage warnings in PHPStorm IDE

 

修正後語法