昨天發完文後，覺得對於演算法還是心有不甘，便上網搜尋了一下，雖然沒直接給到答案，間接的給了我一些大膽的想法。 具體參考的是這篇：https://ithelp.i...
繼上一篇我們講到向量類的建立，接著我們在這一篇文機會提到反射行為的模擬~反射這種行為，在反射面為鉛直或水平時比較單純，所以大部分的Canvas彈跳球動畫教程都是...
路徑繪製常令人感到疑惑的點 - 非零纏繞與奇偶規則 初學路徑繪製的時候，大部分人應該會發現一種讓人疑惑的狀況。 那就是當繪製的路徑稍微複雜一點且路徑線段產生交錯...
經過了連續5篇複雜度略高的物理模擬系列，我在想看官們多少會有點疲乏~ 所以我在規劃了幾篇『中場休息』系列科普文，用來穿插在主要的chapter之間， 休息是為...
其實，我們都曾是動畫師 動畫其實就是一張張的影像，在非常短暫的時間內變化（例如每秒變換 16 張影像），近而產生視覺停留的效果。相信大家小時候都有畫過「翻頁動畫...
再兩天 ～！！ 在鐵人賽的最後，我想要給各位帶來的是噪聲地形的演算~ 之所以想要寫這個題目，原因是因為這個題目也可以承接我們上一篇講的內容(透視投影)， 而...
(10/11更)私下有一些朋友反應手機不太能玩，我才想起這個問題，所以有對此demo在長版進行微調，原文主要講解橫版(電腦端)的處理 先給大家看看成果吧！h...
之前我們有提到過，canvas其實本身可以看做一群像素形成的2維陣列，而Canvas的圖像變形，其實就是對canvas自身做的一種陣列運算。 高中讀理組的同學可...
完！賽！了！第一次參加鐵人賽，每天數著日子發文、熬夜，終於順利完成了～ 😭這三十天的鐵人賽，從最初的 Canvas 開始，一步步走進瀏覽器的世界，認識了無數讓網...
丸子
‧
2025-10-13
老實說我決定要寫影像處理這個部分的時候還蠻猶豫的，因為在javascript 做影像處理的這個領域，IT邦之前其實就有蠻多寫的蠻不錯的文章。 例如第11屆鐵人賽...
進入2D渲染的世界 我們在前面的章節有提到，任何Canvas的相關程序，起手式必定是先取得渲染環境，所以2D渲染程序的第一步當然也就是先取得2D得渲染環境...
前言 延續前篇Android Curv Gradient 曲線漸層過了一個月...終於改好啦!!!! 效率比較 機型：同樣使用Oppo R17 Pro繪製數量：...
學過幾何，圖片當然也是不可或缺的元素！相信大家日常生活中也很常用到圖片縮放、裁切、在圖片上繪圖等功能。今天的圖片範例都會用可愛的動物表情包來做範例，希望大家可以...
有沒有被標題騙進來～ 每次想到剪裁遮色片腦袋裡就會浮現...嘿嘿嘿！今天就帶大家來認識剪裁遮色片，剪裁遮色片顧名思義就是將某個形狀遮在其他圖片上，看到圖片時只會...
作為物理模擬開場的第一進程，當然就要來講一下最經典的物理模擬案例:『彈跳球』～其實很多國外的Canvas特效教程都會把這一篇當成第一個介紹案例，比方說 MD...
經過一天的休息，我們又再度回到了物理模擬的世界~ 我們在這次的chapter要來介紹的是彈力、張力、引力與磁力這種物體之間～與距離相關的作用力的演算方法。 首先...
SO Just Who The Hell Am I? 大家好! 首先先介紹一下我自己, 我是Mizok 小弟目前人在金融相關產業擔任前端工程師，到今年為止大約有...
最近蘋果出了 Apple Watch Series 8，看了我牙癢癢，於是咬緊牙關，把他的錶面臨摹出來了（？）用 Canvas 畫時鐘的教學有很多，今天也參考了...
樹葉問題 先前在第三章畫樹時，就有發現把樹葉畫上去時，系統工作時間會增加而導致掉偵，原圖是300x300，50kb左右，不是很大，但是我們要畫一大堆落葉的話，計...
話不多說先上圖 從左到右依序執行，最後該函式會再呼叫自己一次，圖中淡化的區塊是下個章節的主題 然後把它跟程式碼做對應： function Animatio...
離賽程結束還有3天～ 今天我們要來延續昨天的問題探討～ 我在上一篇似乎沒有把問題描述的很好，所以可能大家蠻confused的 :( 我這邊再仔細的講講這個...
在這篇文章中，我們要來實作上一篇提到的圖像模糊演算法～ 在開始之前，因為有個小狀況是上一篇文中我們沒有提到的，我們要先稍微講解一下 --- 也就是邊緣像素的處...
今天要來做的是畫畫面板，使用到HTML5的canvas這個元素 超白話畫面和功能拆解 有一個可以畫圖的畫布 點選操控面板可以換色、調整粗細 滑鼠左鍵按下就...
前述 今天來用 canvas 做一個 手機解鎖的模擬功能～ onTouchStart={handleStart} onTouchMove={handleMo...
沒錯~我就硬是不要給把標題打成『彈跳球世界V』，咬我啊～ 這篇是斜面碰撞的後篇~ 今天要來補完我們在上一篇沒有解決掉的reposition 和反射速度運算的...
這是我最後的波紋了。 其實我一直想試著講一次這句話(X) 首先來丟一張案例完成後的圖片~ 大家應該多少有看過這種類型的圖樣，最常見的應該就是在遊戲的3D場...
如果我想要每個物件的控制，旁邊都可以有刪除或是複製功能的 icon 可以點擊，並且可以個別操作，該怎麼做呢？ 登登，可以使用 fabric.Control 來新...
直線 在上一篇章我們學會提取點擊時的位置，本篇章也會用到相同的 function，我們先將他移出。 const getClientOffset = (eve...
我們在上一次講到用數理觀點來觀察反射行為的諸多細節，而這篇文則是要講解斜向拋射。不過因為斜向拋射的概念其實不是挺複雜，所以為了不要浪費篇幅，我也會先把一些程式的...
前述 今天來畫個時鐘～！一樣利用 requestAnimationFrame，再判斷當前時間，每一秒往前進，就完成啦！ codesendBox import...
jerrythepotato
Mizok
珊迪
hannnahTW
雪莉
merano5342
iThome鐵人賽
看影片追技術