原创 筆記十四（繪製三+四）
繪製平滑的多條曲線。文件名：drawing3.html。 第二個for循環略過第一個和最後一個點。再循環中創建一個新的控制點，其x , y值分別設置爲循環中當前點和後續點的座標的平均值。繼而繪製一條穿過當前點並以控制點結尾的曲線
2020-06-16 06:25:36
原创 筆記十七（繪製圖片）
繪製圖片有兩種方式： 1、加載圖片 2、使用圖片元素 文件名：img.html。 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>繪
2020-06-16 06:25:36
原创 筆記十八（視頻）
文件中載入一段視頻並將其逐幀渲染到canvas元素上。 文件名：video.html。 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>
2020-06-16 06:25:36
原创 筆記十六（繪製六——線性漸變色）
文件名：drawing6.html。 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>繪製6</title> <style> #canva
2020-06-16 06:25:36
原创 筆記十九（基本動畫——速度實例）
本節筆記中引用的js文件具體參見前幾節筆記。 速度實例中主要理解速度向量概念。 自此節筆記開始，代碼段： if (!window.requestAnimationFrame) { window.requ
2020-06-16 06:25:36
原创 音樂播放器
因爲日常喜歡聽音樂，也就很想編寫一個音樂播放器玩玩。現在積累的差不多了，今天用html5和jquery實現一個音樂播放器的插件。 先奉上最終實現的效果圖： 界面很簡單，功能主要包括： 控制當前播放歌曲的進度； 前後切
2020-02-23 12:50:59
原创 視頻播放器
今天編寫一個視頻播放器插件，依然採用html5+jquery，所需要的知識點和上一篇（音樂播放器）差不多。照例先奉上最終效果圖： 1、創建文件夾： 2、編寫video.html文件： <!DOCTYPE html>
2020-02-23 12:50:59
原创 瀑布流插件
早就聽聞瀑布流佈局，今天用jquery試着寫出，不夠完善，基本能用。 照例先奉上最終效果圖： HTML結構代碼： <div id="waterfall"> <ul> <li><img src="img
2020-02-23 12:50:59
原创 分頁插件
今天完成一個分頁插件。 首先看最終效果圖： 1、創建文件夾： 2、編寫page.html文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
2020-02-23 12:50:59
原创 筆記十五（繪製五）
其他形式的曲線 bezierCurveTO(cp1x , cp1y , cp2x , cp2y , x , y); 增加一個到當前路徑的點，並由三次貝塞爾曲線連接兩個控制點。 arcTo(cp1x , cp1y , cp2x
2020-02-23 12:50:59
原创 筆記二十（加速度實例）
直接上代碼啦。。 雙軸加速度：文件名：acceleration1.html。 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>加速度實例
2020-02-23 12:50:59
原创 筆記十一（canvas顏色應用基礎）
1、色彩合成 假設想通過紅綠藍三原色的三個數值合成一個完整有效的顏色值，可以藉助以下公式： var color = 0xFF << 16 | 0X55 << 8 | 0X33; //採用十六進制 var color = 255
2020-02-23 12:50:59
原创 筆記十二（繪製一）
利用簡單的繪圖指令創建一個簡單的繪製程序： 文件名：drawing1.html <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>繪製1<
2020-02-23 12:50:59
原创 筆記二十二（越界處理）
應用動畫時需關注動畫所實現的環境，動畫對象需要根據環境的變化而改變運動狀態。這裏系統總結處理物體越界以及應用摩擦力的公式。 注： left爲環境右部邊界所在座標x值; right爲環境左部邊界所在座標x值;
2020-02-23 12:50:59
原创 與元素大小相關的屬性
元素區域由內至外依次爲：內容區域、內邊距、邊框、外邊距。（盒子模型）如下圖： 通過以下四個屬性可以取得元素的偏移量：、 offsetHeight：垂直方向上佔用空間大小（像素），包括元素內容區高度、左右內邊距高度、水平滾動
2020-02-23 12:50:59