終於來到彈跳球的最後一部分～ 這篇我們主要就是要講解傾斜面存在的狀況下，程式的撰寫方法! 老實說我原本是打算在一篇文內把傾斜面的範例處理完畢的。但是因為碰上一些...
說明 在選擇剪下時，我們可以建立一個新的 canvas來建立我們所剪下的內容 /** * 滑鼠點下畫布 */ const handleMou...
今天西子灣被斷網了，所以沒時間打太多字，請見諒，有看不懂的留言詢問哦!https://jerry-the-potato.github.io/Chapter4-d...
我們在上一次講到用數理觀點來觀察反射行為的諸多細節，而這篇文則是要講解斜向拋射。不過因為斜向拋射的概念其實不是挺複雜，所以為了不要浪費篇幅，我也會先把一些程式的...
說明 ctx.font = "30px sans-serif" //文字字型 大小 ctx.fillStyle="#00A0E9&...
本篇銜接上篇：https://ithelp.ithome.com.tw/articles/10272738 該如何讓動畫更自然？ 今天來深入聊聊怎麼調節動畫...
繼上一篇我們講到向量類的建立，接著我們在這一篇文機會提到反射行為的模擬~反射這種行為，在反射面為鉛直或水平時比較單純，所以大部分的Canvas彈跳球動畫教程都是...
題外話 昨天沒把樹葉畫上去，還是心癢癢的，所以動手簡單裝飾了一下這棵樹：https://jerry-the-potato.github.io/Chapter3-...
方法一 此多邊形方法雖然不是小畫家的畫法，但一樣可以達成多邊形的做法，如下： /** * 滑鼠點下畫布 */ const handleMou...
昨天發完文後，覺得對於演算法還是心有不甘，便上網搜尋了一下，雖然沒直接給到答案，間接的給了我一些大膽的想法。 具體參考的是這篇：https://ithelp.i...
作為物理模擬開場的第一進程，當然就要來講一下最經典的物理模擬案例:『彈跳球』～其實很多國外的Canvas特效教程都會把這一篇當成第一個介紹案例，比方說 MD...
先補上Demo 將前兩天畫好的樹枝骨幹，搭配第二章學的動畫效果，就能讓樹開始擺動了：https://jerry-the-potato.github.io/Cha...
OK, 我們終於來到了基礎篇最後的部分，也就是Canvas動畫~!(撒花) 在這個部分，我們會介紹： canvas實作動畫的原理 一個簡易動畫的實作案例...
圓形 嘗試ellipse 按照搜尋結果，我們一開始可能很直覺的會想到使用 ellipse ellipse 是 Canvas 2D API 添加橢圓路徑的方法。...
此篇接續第一篇：https://ithelp.ithome.com.tw/articles/10269980接下來我們把造樹的步驟拆分成骨幹、畫樹枝、樹葉，而到...
『像素操作(Pixel Manipulation)』 顧名思義就是要去以單一像素為最小單位來進行操作，而就像我們透過JS改變DOM結構所進行的『DOM操作』一樣...
繪製矩形 核心 先來學習繪製矩形的方法 strokeRect 使用當前的繪畫樣式，描繪一個起點在 (x, y) 、寬度為 w 、高度為 h 的矩形的方法。...
你是說...樹嗎? 嘿~丟！鐵人賽至今已經過半，實在是油盡燈枯，想不到主題了，剛好看到這兩個很讚的樹，覺得很適合這次的主題！加上筆者我又對大自然的碎形相當著迷，...
之前我們有提到過，canvas其實本身可以看做一群像素形成的2維陣列，而Canvas的圖像變形，其實就是對canvas自身做的一種陣列運算。 高中讀理組的同學可...
https://jerry-the-potato.github.io/ChapterX-demo/https://jerry-the-potato.github...
直線 在上一篇章我們學會提取點擊時的位置，本篇章也會用到相同的 function，我們先將他移出。 const getClientOffset = (eve...
路徑繪製常令人感到疑惑的點 - 非零纏繞與奇偶規則 初學路徑繪製的時候，大部分人應該會發現一種讓人疑惑的狀況。 那就是當繪製的路徑稍微複雜一點且路徑線段產生交錯...
打了2000字消失了怎麼辦呢(´・_・`) 先去上個廁所壓壓驚，懇請IT邦邦忙快優化界面 在編輯介面有許多的連結藏在各個角落，而且不是設計成另開分頁，直接無情跳...
何謂路徑？ 要介紹路徑繪圖相關的api之前，必須要先理解什麼叫做『路徑』。 有學過電腦繪圖軟體，例如Adobe Photoshop, Adobe Illustr...
前言 前天談到如何避免程式碼散落四處、維護困難，帶大家改寫了物件格式，過了兩天，我突然想到，當時花太多篇幅在解釋觀念和舉例子，結果沒有實際把程式碼秀給大家看，果...
填滿色彩 在點擊畫布時，使用 fillStyle 先填上顏色，再覆蓋整個畫布 /** * 滑鼠點下畫布後開始畫畫 or 填滿 */ const handleMo...
進入2D渲染的世界 我們在前面的章節有提到，任何Canvas的相關程序，起手式必定是先取得渲染環境，所以2D渲染程序的第一步當然也就是先取得2D得渲染環境...
說明 根據 MDN 的教學 一開始canvas為空白，程式碼腳本需要先存取渲染環境，在上面繪圖，然後才會顯現影像。 素有一個方法(method)叫getCon...
Some Deeper Basics 圖像的概念 我們在前面有說到，canvas本身是透過物件模型來繪製圖像，但是我們沒有提到何謂"圖像"。...
前述 預計會花十五篇到二十篇使用 React 做出復刻 XP 的小畫家！讓大家在過程中也可以學習到相關的 canvas 技巧，不會 React 的人也不必擔心，...
Mizok
雪莉
jerrythepotato
iThome鐵人賽
看影片追技術