javascript

[Canvas] 使用 JavaScript 實作 canvas 畫筆的功能

畫筆的功能 大家都有玩過小畫家,我們可以使用小畫家的畫筆,輕鬆的畫出一些我們想要的圖案,相當的趣味也非常的方便 畫筆的功後續也演變為一些電子簽證的機制,最近剛好也碰到了一些類似的需求 決定在下方做個製作上的紀錄,下方提供了一個比較陽春的版本當作範例,也是為了方便理解他的製作方式 See the Pen Canvas 畫筆 by SkyRoxas (@SkyRoxas) on CodePen. 進入說明 HTML 架構如下所示: <canvas id="canvas"></canvas> 宣告變數 與

[JavaScript] 操作 iframe 元素,製作編輯的瀏覽畫面

這篇文章主要是在說明如何使用 JavaScrip 來對 iframe 進行操作 紀錄與分享一下目前操作的經驗與方法 情境 首先先描述一下常見的情境 一般我們會需要直接操作 iframe 的需求,比較常見的就是 會員後台 或是 一些工具的 GUI 介面 通常使用者在操作後台提供的編輯介面時,旁邊可能都會專門用來 demo 使用者設定結果的 demo 畫面 例如:WordPress 後台的自訂外觀 如果你覺得手癢癢的去解析一下右邊那整塊 示意的區塊 ,你會發現他們也是使用 iframe 的元素進行製作的 為什麼要使用 iframe

[ES6 JavaScript] 模板字符

還在使用 + 號做字串的處理嗎? ES6 中提供 模板字符 可以使我們更直覺的來進行 字串的處理 讓我們繼續往下看: 在 ES6 之前,我們處理字串的方式,如下所示: var before = "hello" var after = "world" var string = "哇~ " + before + " " + after + " 牛牛的~" 上面的範例中, string 因為使用了很多的 "" 還有 + 號,會使得我們在觀看上,比較不易 ES6

[JavaScript] Array.prototype.findIndex() 檢查陣列元素

findIndex() 的 方法,其實跟我之前提到的 indexOf 的方法雷同 都是用來比對 陣列(Array) 的 元素,回傳其 索引值 的方法 不過 findIndex 的方法,則可以帶入 函示 來進行陣列的比對: Array.prototype.findIndex() 語法: arr.findIndex(callback[, thisArg]) 參數: callback:針對數組中的每個元素,都會執行該回呼函式,執行時會自動傳入下面三個參數: