## :-: [HTML 5 Canvas 參考手冊](http://www.w3school.com.cn/tags/html_ref_canvas.asp)
> ## :-: canvas - 繪制線形 / 填充
```
<!-- canvas畫布 -->
<canvas id="demo" width="600" height="400"></canvas>
<script>
// 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D
var ctx = demo.getContext('2d');
// 想要畫的圖形
ctx.moveTo(50, 50); // 開始 - 起始點、
ctx.lineTo(150, 50); // 到某一點
ctx.lineTo(150, 150);
ctx.closePath(); // 閉合路徑、
// 設置畫筆寬度、
ctx.lineWidth = 5;
// 設置畫筆顏色、
ctx.strokeStyle = '#f40';
// 開始畫
ctx.stroke();
// 填充
ctx.fill();
// 抬起畫筆
ctx.beginPath();
</script>
```

> ## :-: canvas - 繪制矩形 / [圓](http://www.w3school.com.cn/tags/canvas_arc.asp) / 圓角矩形
```
// 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D
var ctx = demo.getContext('2d');
// 畫矩形 - ctx.rect(x, y, dx, dy);
ctx.rect(200, 50, 100, 100);
ctx.stroke();
ctx.beginPath();
// 直接繪制矩形、
ctx.strokeRect(310, 50, 100, 100);
// 直接繪制帶填充的矩形、
ctx.fillRect(310, 160, 100, 100);
// 橡皮擦 - ctx.clearRect(x, y, dx, dy)
ctx.clearRect(180, 30, 50, 50);
// 畫弧形 - 圓 ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
ctx.arc(100, 100, 50, 0, Math.PI * 2, 0);
ctx.stroke();
ctx.beginPath();
// Demo
ctx.moveTo(100, 250);
ctx.arc(100, 250, 50, 0, Math.PI * 1.5, 0);
ctx.lineTo(100, 250);
ctx.stroke();
ctx.beginPath();
```



```
// 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D
var ctx = demo.getContext('2d');
// 繪制圓角矩形 - ctx.arcTo(x1, y1, x2, y2, r);
ctx.moveTo(100, 120);
ctx.arcTo(100, 200, 200, 200, 20); // 圓角
ctx.arcTo(200, 200, 200, 100, 20);
ctx.arcTo(200, 100, 100, 100, 20);
ctx.arcTo(100, 100, 100, 200, 20);
ctx.stroke();
ctx.beginPath();
```

> ## :-: canvas - 貝塞爾曲線
```
// 2次 貝塞爾曲線 - ctx.quadraticCurveTo(x1, y1, ex, ey);
// x1,y1 == 控制點、ex,ey == 結束點
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(100, 200, 200, 200);
ctx.stroke();
ctx.beginPath();
// 3次 貝塞爾曲線 - ctx.bezierCurveTo(x1, y1, x2, y2, ex, ey);
// x1,y1,x2,y2 == 控制點、ex,ey == 結束點
ctx.moveTo(300, 100);
ctx.bezierCurveTo(400, 300, 500, 100, 600, 300);
ctx.stroke();
ctx.beginPath();
```

> ## :-: canvas - 變換 / 圖案 / 其他
```
// 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D
var ctx = demo.getContext('2d');
// 平移 - ctx.translate(dx, dy); (放在繪圖之前)
ctx.translate(-50, -50); // 平移
// 縮放 - ctx.scale(sx, sy);
ctx.scale(2, 2); // 縮放
// 旋轉 - ctx.rotate(Math.PI);
ctx.rotate(Math.PI / 4);
ctx.save(); // 保存當前繪圖狀態、1
ctx.restore(); // 恢復保存的繪圖狀態、2
// 先重置再變換 - ctx.setTransform(水平縮放, 水平傾斜, 垂直傾斜, 垂直縮放, 水平移動, 垂直移動);
ctx.setTransform(1, 1, 1, 0.5, 123, 123);
// 在之前的基礎上變換 - ctx.transform(水平縮放, 水平傾斜, 垂直傾斜, 垂直縮放, 水平移動, 垂直移動);
ctx.transform(1, 2, 3, 4, 5, 6);
ctx.strokeRect(100, 100, 200, 200);
ctx.stroke();
ctx.beginPath();
// 填充圖案 - ctx.createPattern(img, repeat);
var img = new Image();
img.onload = function() {
// 圖片加載是異步的過程、需要在加載完成事件里使用、
var fill = ctx.createPattern(this, 'no-repeat'); // 不重復
ctx.fillStyle = fill; // 設置顏色為圖案
ctx.fillRect(50, 50, 100, 100); // 繪制帶填充的矩形
ctx.stroke();
ctx.beginPath();
}
img.src = './src/wx.jpg';
// 線性漸變 - ctx.createLinearGradient(x1, y1, x1, y);
var bg = ctx.createLinearGradient(0, 0, 200, 200);
bg.addColorStop(0, 'red');
bg.addColorStop(0.25, '#139');
bg.addColorStop(0.5, '#168');
bg.addColorStop(0.75, '#654');
bg.addColorStop(1.0, '#000');
ctx.fillStyle = bg;
ctx.fillRect(50, 50, 200, 200);
ctx.stroke();
ctx.beginPath();
// 徑向漸變 - ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
var bg = ctx.createRadialGradient(200, 200, 0, 200, 200, 100);
bg.addColorStop(0, '#fff');
bg.addColorStop(1.0, '#000');
ctx.fillStyle = bg;
ctx.arc(200, 200, 100, 0, Math.PI * 2, false); // 畫圓
ctx.fill(); // 填充
ctx.stroke();
ctx.beginPath();
// 陰影
ctx.shadowColor = 'red'; // 陰影顏色
ctx.shadowOffsetX = 10; // X - 偏移量
ctx.shadowOffsetY = 10; // Y - 偏移量
ctx.shadowBlur = 10; // 模糊程度
// ----------------------------------
ctx.fillRect(100, 100, 100, 100);
ctx.stroke();
ctx.beginPath();
// 文字陰影
ctx.shadowColor = 'red'; // 陰影顏色
ctx.shadowOffsetX = 10; // X - 偏移量
ctx.shadowOffsetY = 10; // Y - 偏移量
ctx.shadowBlur = 10; // 模糊程度
// ----------------------------------
ctx.fillStyle = '#aaa'; // 填充顏色
ctx.font = '50px sans-serif';
ctx.fillText('Hello World~', 100, 100);
ctx.stroke();
ctx.beginPath();
// 線段樣式、.lineCap .lineJoin
ctx.lineCap = 'round'; // 圓形
ctx.lineJoin = 'bevel'; // 方形
// 更多樣式自行百度
```

> ## :-: canvas - 裁剪
```
ctx.arc(200, 200, 50, 0, Math.PI * 2, true); // 圓
ctx.stroke();
ctx.clip(); // 裁剪
ctx.fillRect(200, 200, 50, 50); // 帶填充矩形
ctx.beginPath();
```

> ## :-: canvas - 繪制圖片
```
// 繪制圖片 -
var img = new Image();
img.onload = function() {
// 圖片加載是異步的過程、需要在加載完成事件里使用、
// 3個參數的用法、ctx.drawImage(img, x, y);
ctx.drawImage(img, 10, 10);
// 5個參數的用法、ctx.drawImage(img, x, y, dx.dy);
ctx.drawImage(img, 220, 10, 50, 50);
// 9個參數的用法、ctx.drawImage(img, x1, y1, dx1, dy1, x2, y2, w2, h2);
// 截取圖片0,0 100,100的區域,放到220,70的位置,改變寬高為200*200
ctx.drawImage(img, 0, 0, 100, 100, 220, 70, 200, 200);
ctx.beginPath();
}
img.src = './src/wx.jpg';
```

> ## :-: canvas - 其他
```
// 將畫板導出為圖片編碼 (受同源策略影響) data:image/png;base64
var base64 = demo.toDataURL();
console.log(base64);
// 創建新的空白ImageData對象、一般不用
ctx.createImageData(100, 100);
// 獲取指定區域的像素信息(object) ctx.getImageData(x, y, dx, dy);
var data = ctx.getImageData(100, 100, 50, 50);
// 放回指定區域的像素、ctx.putImageData(data, x, y);
ctx.putImageData(data, 100, 300);
// 命中檢查
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request