【製作絢麗的粒子煙火】 #實驗 #程式
-
備課中的範例，從零開始建構粒子跟向量的類別，
並使用canvas在網頁上做出絢麗的煙火
-
https://codepen.io/frank890417/full/ZxWwzL/
-
目前Canvas與特效動畫 單元上架了:
Canvas與特效動畫 - 繪圖基礎語法 與動畫原理 (44min)
Canvas與特效動畫 - 畫布的座標系操作 (60min)
Canvas與特效動畫 - 物理基礎(速度 / 加速度) (63min)
Canvas與特效動畫 - Vector 向量的概念 (47min)
Canvas與特效動畫 -
-
在課程裡面從最基礎的canvas，到寫出自己的向量class應用，
以及了解物理裡面速度跟加速度做出模擬器的基礎概念，
準備講義的時候都覺得在上物理了XD
每個單元都將近一個小時滿滿的投影片跟範例
-
動畫互動網頁特效入門（JS/CANVAS）課程：
>> https://hahow.in/cr/monoame-webdesign2
-
IG: https://instagram.com/BossCodingplease
Youtube: https://www.youtube.com/channel/UCHX_XMhPrtvOmgGOnA2eTmA/
canvas座標 在 [問題] 關於js取得滑鼠座標- 看板Web_Design - 批踢踢實業坊 的推薦與評價
各位大大好
小弟最近跟朋友組團 利用閒餘時間寫程式
最近寫了一個cancvas
<canvas id="draw" onmousedown="start()" onmousemove="move()" onmouseup="stop()">
簡單說就是要畫直線(小畫家那種 可任意拉的@@) 現在任意畫可以 但畫直線出了點問題
目前暫定想法是在start()輸出滑鼠座標給move()
現在問題是 不知道該如何輸出@@
function start() {
draws = true; //進入繪圖模式
context.beginPath();//繪畫開始
startPoint = { x: event.clientX,
y: event.clientY }
return startPoint;
}
function move(startPoint) {
if (draws) {
context.moveTo(startPoint.x, startPoint.y);
context.lineTo(event.clientX, event.clientY); //下一點
context.stroke(); //繪畫
}
}
很明顯的startPoint 有問題 但不知道該如何解決><
謝謝版上的大神
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.121.68.243
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1523374699.A.A35.html
※ 編輯: nckux56 (122.121.68.243), 04/10/2018 23:41:39
... <看更多>