>[success] # 繪制從黑到紅
~~~
1.線條的高度就是設置線條的寬度
2.長度+255 rgb的漸變最大值
~~~
>[danger] ##### 代碼
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
ctx.lineWidth = 30;
for (var i = 0; i < 255; i++) {
ctx.beginPath();
ctx.moveTo(100+i-1,100);
ctx.lineTo(100+i,100);
ctx.strokeStyle = 'rgb('+i+',0,0)';
ctx.stroke();
}
</script>
</body>
</html>
~~~
- HTML
- Html標簽
- canvas繪圖
- 直線案例
- 黑到白的漸變矩形
- 制作坐標繪圖效果
- 繪制矩形效果
- 繪制字體
- 繪制圓弧
- 圖片的繪制
- 坐標的移動
- html5
- html5 --- 兼容問題
- html5 ---頁面布局的標簽
- html5--- 新增type 屬性
- html5 ---input/表單新增的其他元素
- html5---新增的js事件
- html5---新增的進度條標簽
- html5---知識點整合案例
- html5 --- 音頻視頻
- html5---dom和class事件
- html5---自定義屬性
- html5---tab切換
- html5--接口
- html5--網絡接口
- html5--全屏接口
- html5---讀取文檔信息
- html5--拖拽
- html5--地圖
- html5--數據存儲
- html5--視頻案例
- html5-css
- css3選擇器
- 屬性選擇器
- 兄弟選擇器
- 偽類選擇器
- 創建befor-after
- 盒子屬性
- 盒子模型
- 盒子圓角
- 盒子陰影
- 盒子顏色的漸變
- 偽元素首字下沉
- 顏色透明度
- 文本陰影
- backgrou 設置
- 過渡動畫效果
- 手風琴案例
- 2D效果
- 2D水平移動
- 2D的方大縮放效果
- 2D旋轉
- 2D斜切
- 2D旋轉撲克牌案例
- 盾牌案例
- 實現居中定位
- 3D效果
- 畫一個正方體
- 滾動輪播圖
- 幀動畫效果
- 無縫滾動效果
- 時鐘動畫效果
- 字體
- 多列布局
- 彈性盒子布局
- 伸縮布局flex-grow子項填充空白比例
- 設置側軸的居中方式
- 定義子元素的收縮比例
- 用flex實現子元素比例縮放
- 菜單伸縮案例
- 布局案例
- 攜程網案例
- 全屏滾動效果動畫
- 手機端
- 流式布局概念
- 手機適配方案
- 通用樣式的處理
- 兩欄自適應布局
- 手機端js新事件touch
- 左滑右滑方法封裝
- 點擊事件的封裝
- 京東案例
- 完整的代碼
- 效果的js代碼
- 購物頁面案例
- 全部完整css/html
- iscroll--對隱藏容器滾動
- 輪播圖插件--swiper
- CSS
- 什么是css
- 常用屬性
- 字體選屬性
- 樣式書寫三種方式
- 選擇器
- 1.1基礎選擇器
- 1.1.1谷歌標題案例
- 1.2復合選擇器
- 1.2.1新聞布局練習
- 標簽選擇器
- css三大特性/權重
- 塊級元素/內行/內行塊
- a標簽的5個方式
- 連接導航案例
- 商城圖標轉換
- 背景屬性
- input 框中加圖標案例
- 在ul前加圖片案例
- 背景案例分析
- 文字行高
- 行高居中案例
- 盒子模型
- 盒子模型邊框屬性-boder
- input邊框案例
- 盒子模型內邊距-padding影響盒子大小
- 新浪標題欄
- 盒子模型外邊距-margin
- 行內元素/行內塊 盒子
- 盒子模型綜合案例
- 綜合案例一
- 綜合案例二
- 綜合案例三
- 浮動布局
- 文本繞圖
- 制作導航
- 制作導航二
- 浮動布局練習一
- 浮動布局練習二
- 清除浮動
- 同行常用的開頭清除
- overflow-溢出
- 定位
- margin-left/right 左右靠
- 定位案例
- 定位案例-關于定位和浮動
- 絕對定位案例
- 定位的盒子居中顯示
- 圖片和文字居中對齊
- 設置logo圖片點擊跳轉
- css 可見性
- 精靈圖
- 滑動門
- css綜合案例
- 手機官網案例
- 頭部分析
- 內容分析
- 新聞分析
- Js初始
- js-基本語法
- 注釋
- 類型
- 數字類型-number
- 字符串類型-string
- 類型轉換
- 變量
- 變量交換案例
- 流程控制
- 分支語句
- if-分支語句
- if-else分支語句
- 三元分支語句
- if-else if 分支語句
- switch-case 分支語句
- 分支判斷的總結
- 循環語句
- while循環語句
- do-while 循環語句
- do 和 while 區別
- for循環語句
- 經典題目畫星星
- 經典題目斐波那契數列
- break--關鍵字
- continue-關鍵字
- 操作運算符
- 一個和python 不一樣的問題
- 數組
- 循環數組中的數據
- 求數組簡單案例
- 冒泡排序
- 函數
- js-全局/局部作用域
- js-匿名函數和命名函數
- js-預解析
- js-回調函數
- js-函數的返回-return
- js-arguments-偽數字統計實參
- js-函數-綜合案例
- 對象
- 系統構造函數對象
- 工廠模式創建對象
- 自定義構造函數對象
- 自變量函數對象
- 循環json格式
- 基本類型和引用類型
- 內置對象
- 內置對象-Math
- 內置對象-Date
- 內置對象-String
- 內置對象-Array
- js-操作DOM
- 常見的操作方法
- DOM-入門分析
- Dom-案例
- DOM-案例一
- DOM-案例二
- DOM-node節點操作
- NODE-節點案例
- NODE - 應用案例
- DOM-創建元素
- DOM-點擊事件
- DOM-鼠標移動事件
- DOM-百度搜索案例
- DOM-兼容性案例
- DOM-offset 獲取位置
- DOM-scroll
- DOM -client可視區域
- js-操作BOM
- 常見的操作
- onload -- 頁面加載事件
- BOM--對象
- location--當前 URL 信息
- history -- 控制前進后退
- navigator --- 判斷瀏覽器類型
- setInterval -- 定時器
- setTimeout -- 一次性定時器
- getComputedStyle -- 最強的獲取位置
- 輪播圖--加速效果案例
- 一、為輪播圖做準備工作
- 二、輪播圖小試牛刀
- 三、初入佳境點擊觸發輪播效果
- 四、升級改造無縫輪播
- 五、最后的輪播
- 輪播圖--勻速動畫案例
- 一、小試牛刀 --- 筋斗云案例
- 二、德藝雙馨 -- 手風琴案例
- 三、毀天滅地 -- 開機動畫
- 四、一鳴驚人 -- 旋轉木馬
- 鼠標移動-一系列案例
- onmousedown -- 摁住鼠標移動彈窗
- JS的回調思想
- onmousemove -- 高清放大鏡
- onmousemove -- 自定義滾動條
- JS的回調思想
- 回調地獄
- Promise 具體用法
- Js高級
- 一、創建對象的四種方式
- 二、構造函數和實例對象關系
- 三、小試牛刀編寫面向對象
- 四、深入了解面向對象
- 五、把局部變量更新成全局
- 六、做一個貪吃蛇
- 七、繼承
- 八、函數聲明和函數表達區別
- 九、this 指向
- 十、apply 和 call 方法
- 十一、bind 方法
- 十二、常見函數中的成員
- 十三、函數作為參數和返回值
- 十四、閉包
- 十五、沙箱
- 十六、遞歸
- 十七、賦值、深淺copy
- Jquery
- dom對象和jq對象不同點深入
- 基本選擇器 -- 通過css找jq對象
- 基本選著器 -- 條件過濾選擇器
- 標簽篩選選擇器 --- 找兒子爸爸孫子
- 以下案例知識儲備
- 下拉菜單案例
- 選中突出展示效果
- 手風琴效果
- 淘寶小廣告案例
- jquey -- 對css/class 操作總結
- tab -- 欄切換
- jquery -- 自定義屬性 attr/prop
- 利用attr 實現相冊點擊小圖變大
- 利用prop實現全選單選
- juqery -- 顯示隱藏/動畫效果
- slideDown/slideUp -- 下拉菜單
- fadeIn/fadeOut -- 淡入淡出的輪播效果
- animate -- 手風琴效果
- animate -- 鋼琴效果的導航
- jquery -- 創建子節點/兄弟節點
- 左面的內容到右面
- 模仿微博案例
- jquery -- 刪除和復制
- 彈幕效果
- jquery -- 獲取文本值/焦點
- jquery -- 中的innerHTML /innerText
- jquery -- 獲取標簽的寬高
- jquery --- scrollTop與scrollLeft
- 固定導航欄
- 點擊火箭返回頂部
- jquery --- 獲取元素距離document和父類距離
- jquery --- on委托 事件
- 表格刪除事件委托
- jquery --- 移除事件
- jquery -- 觸發事件
- jquery --- 觸發事件
- 鋼琴標題代碼
- jquey -- 提醒消息顯示后在隱藏
- jquery -- 五星好評
- jquery -- each
- jquery -- 更改jq$符號
- jquery --插件
- 正則表達式
- 一、正則表達式練習
- 二、js正則表達式模塊
- 二·一、js正則表達式更多用法
- 三、案例驗證密碼長度
- 四、判斷用戶輸入的是否是郵箱
- 五、驗證用戶輸入是否是中文
- 六、多個表單驗證
- 七、常用的正則
- less
- 變量聲明
- Mixin--混合使用
- @import --- 引入樣式
- 嵌套使用less
- 函數和計算
- less在瀏覽器端自解析
- less編寫案例
- 案例less/html
- 移動端zepto 介紹
- 響應式布局
- Bootstrap
- Bootstrap-柵格系統
- Bootstrap-響應式工具
- 簡單菜單案例
- Bootstrap-預定義風格
- 簡單的登錄案列
- Bootstrap-按鈕風格
- 按鈕-下拉菜單
- 延遲下拉
- 滑動下拉
- 同步下拉
- Bootstrap-標簽頁
- 標簽頁-內容
- Bootstrap-導航條
- 制作導航樣式
- 隱藏導航樣式
- Bootstrap-輪播圖
- Bootstrap-table
- 屬性介紹
- 簡單后臺+前臺交互
- 微金所案例
- ajax/jsonp 處理方式
- jquery - ajax 使用
- jq--load
- jsonp--跨域
- 前端模板使用
- 項目案例
- 移動端首頁/分類
- 搜索頁面
- 搜索列表頁
- 商品頁
- 用戶登錄頁
- 購物車頁
- 編寫通用的windows對象js
- 后臺管理端
- 登陸頁面
- 管理端頁面
- 管理端數據展示頁面
- Node.js
- 利用node.js 搭建服務器
- 創建簡單的服務器連接請求
- 處理靜態文件 -- 留言板案例
- npm -- 使用
- Express -- 框架使用
- 規劃Express -- 結構目錄
- 簡單的案例
- NODE配合mongodb
- Vue
- Vue常用指令
- 大胡子語法
- v-text -- 標簽內添加內容
- v-html -- 顯示標簽內容
- v-bind -- 給標簽屬性綁定內容
- v-model -- 雙向綁定數據
- v-for -- 循環用法
- v-on -- 綁定觸發事件
- v-if / v-show 顯示和隱藏dom
- 事件修飾符
- 樣式控制
- 簡單案例
- 點擊變色
- 最簡單的增刪改查
- 綜合案例增刪改查
- 簡單的購車案例
- VUE監聽和計算watch/computed
- 監聽案例
- 模糊查詢
- Vue過濾器
- 自定義指令 -- 綁定事件
- VUE生命周期
- Vue異步請求
- VUE-異步請求案例
- Vue動畫效果
- VUE創建組件
- 創建全局組件
- 創建局部組件
- 組件中的data 使用
- 利用組件做切換效果顯示
- 組件切換動畫效果
- 獲取dom對象
- 組件傳值父傳子
- 組件傳值子傳父/父傳子方法
- 評論案例
- 點擊顯示側邊欄案例
- slot內容分發
- 動態組件
- 使用render 函數渲染組件
- Vue路由映射
- VUE路由映射樣式
- VUE獲取路由參數
- VUE路由的嵌套
- VUE命名視圖
- vuex
- webpack
- webpack.config.js -- 具體配置
- package.json 具體配置
- 在webpack使用Vue
- webpack.config.js -- vue 配置版本
- VUE -- 案例
- 基本配置
- 路由做頁面切換
- 創建新聞展示組件
- 圖片組件展示效果
- 商品詳情頁插件
- 輪播圖的組件
- number 組件
- 購物車組件
- 配合Vue-cli創建項目
- ##### 偽數組
- 前端 -- 精華篇總結
- HTML--精華
- HTML--標簽
- HTML5--標簽
- css--基礎
- css -- 三大特性
- css--基本選擇器
- css--偽類選擇器
- css--復合選擇器
- css -- 屬性選擇器
- css -- 偽元素選擇器
- 標簽元素--塊/行內/行內塊
- font-- 字體
- text -- 文本
- background -- 背景
- css -- 盒子模型
- css3 -- 盒子模型
- 盒子模型布局遵循
- 文字、盒子水平居中
- 背景和圖片的區別
- css -- 浮動
- 常見的布局
- css -- 定位(position)
- 元素的顯示與隱藏
- css -- transition過渡動畫
- css -- transform2D變形操作
- css -- transform3D變形
- css -- 動畫animation
- css -- 常用的篇
- css -- 文字溢出隱藏
- css3 -- flex伸縮布局
- BFC -- 特性
- 精靈圖和文字篇
- css -- 前綴
- css -- 經典案例
- 工具篇章