??????小菜繼續(xù)學習 Canvas 的相關(guān)方法：
drawVertices 繪制頂點
??????小菜上次沒有整理 drawVertices 的繪制方法豪直，這次補上；Vertice 即頂點荤懂，通過繪制多個頂點趋急，在進行連線，多用于 3D 模型中势誊；
??????drawVertices 包括三個參數(shù)呜达，第一個是頂點屬性，根據(jù)不同屬性線的連接方式也不同粟耻；第二個是混合模式查近，即線的顏色與背景色混合效果；第三個是畫筆挤忙，小菜測試調(diào)整 Paint 線的粗細無法調(diào)整整體連線的粗細霜威；
??????小菜借用 A B C D E F G H I 頂點來簡單介紹：
- VertexMode.triangles：每三個分割頂點相連，即 [A B C] [D E F] [G H I] 共 3 組册烈；
- VertexMode.triangleStrip：每相鄰的三個頂點相連戈泼，即 [A B C] [B C D] [C D E] [D E F] [E F G] [F G H] [G H I] 共 7 組；
- VertexMode.triangleFan：每相鄰的兩個頂點與首點相連赏僧，即 [A B C] [A C D] [A D E] [A E F] [A F G] [A G H] [A H I] 共 7 組大猛；
canvas.drawVertices(
Vertices(VertexMode.triangles, [
Offset(30, 30), Offset(30, 60),Offset(60, 60),
Offset(90, 60), Offset(120, 60), Offset(120, 30),
Offset(60, 90), Offset(60, 120), Offset(90, 120),
]),
BlendMode.colorBurn, Paint()..color = Colors.red);
canvas.drawVertices(
Vertices(VertexMode.triangleStrip, [
Offset(210, 30), Offset(210, 60), Offset(240, 60),
Offset(270, 60), Offset(300, 60), Offset(300, 30),
Offset(240, 90), Offset(240, 120), Offset(270, 120),
]),
BlendMode.colorBurn, Paint()..color = Colors.green);
canvas.drawVertices(
Vertices(VertexMode.triangleFan, [
Offset(120, 150), Offset(120, 180), Offset(150, 180),
Offset(180, 180), Offset(210, 180), Offset(210, 150),
Offset(150, 210), Offset(150, 240), Offset(180, 240),
]),
BlendMode.colorBurn, Paint()..color = Colors.blue);
畫布操作
??????小菜接下來介紹一下畫布的基本操作，與 Android 很相似淀零；
scale 縮放
??????scale 即縮放效果挽绩，縮放的是畫布大小，可以設置縮放倍數(shù)驾中，且縮放倍數(shù)會疊加唉堪；
canvas.drawRect(
Rect.fromLTWH(60, 60, 90, 50),
Paint()..color = Colors.red
..strokeWidth = 2.0..style = PaintingStyle.stroke);
// 縮放
canvas.scale(2);
canvas.drawRect(
Rect.fromLTWH(60, 60, 90, 50),
Paint()..color = Colors.red
..strokeWidth = 2.0..style = PaintingStyle.stroke);
// 縮放
canvas.scale(0.25);
canvas.drawRect(
Rect.fromLTWH(60, 60, 90, 50),
Paint()..color = Colors.red
..strokeWidth = 2.0..style = PaintingStyle.stroke);
translate 平移
??????translate 即平移模聋，平移的也是畫布，并非畫布中子元素唠亚，兩個參數(shù)分別為水平方向和豎直方向距離链方；
canvas.drawLine(
Offset(0, 0), Offset(60, 60),
Paint()..color = Colors.red..strokeWidth = 2);
canvas.drawRect(
Rect.fromLTWH(60, 60, 90, 50),
Paint()..color = Colors.red
..strokeWidth = 2.0..style = PaintingStyle.stroke);
// 平移
canvas.translate(30, 90);
canvas.drawLine(
Offset(0, 0), Offset(0, Screen.height),
Paint()..color = Colors.blueGrey..strokeWidth = 2);
canvas.drawLine(
Offset(0, 0), Offset(Screen.width, 0),
Paint()..color = Colors.blueGrey..strokeWidth = 2);
canvas.drawLine(
Offset(0, 0), Offset(60, 60),
Paint()..color = Colors.red..strokeWidth = 2);
canvas.drawRect(
Rect.fromLTWH(60, 60, 90, 50),
Paint()..color = Colors.red
..strokeWidth = 2.0.style = PaintingStyle.stroke);
rotate 旋轉(zhuǎn)
??????rotate 即旋轉(zhuǎn)，原點為屏幕左上角灶搜，小菜為了效果先將畫布平移一部分到屏幕中間在進行旋轉(zhuǎn)測試侄柔，注意參數(shù)并非角度而是對應的 PI 值；
canvas.drawLine(
Offset(0, 0), Offset(60, 60),
Paint()..color = Colors.red..strokeWidth = 2);
canvas.drawRect(
Rect.fromLTWH(60, 60, 90, 50),
Paint()..color = Colors.red
..strokeWidth = 2.0..style = PaintingStyle.stroke);
// 以當前原點旋轉(zhuǎn) 90 度
canvas.rotate(degToRad(90));
canvas.drawLine(
Offset(0, 0), Offset(60, 60),
Paint()..color = Colors.green..strokeWidth = 2);
canvas.drawRect(
Rect.fromLTWH(60, 60, 90, 50),
Paint()..color = Colors.green
..strokeWidth = 2.0..style = PaintingStyle.stroke);
skew 斜切
??????skew 即斜切占调，兩個參數(shù)為水平方向和豎直方向切度值暂题，值為三角函數(shù)中的 tan 值，即 45 度時 tan 值為 1究珊；
canvas.drawRect(
Rect.fromLTWH(60, 0, 90, 50),
Paint()..color = Colors.red
..strokeWidth = 2.0..style = PaintingStyle.stroke);
// 水平方向斜近 30 度薪者，豎直方向不變
canvas.skew(0.6, 0);
canvas.drawRect(
Rect.fromLTWH(60, 0, 90, 50),
Paint()..color = Colors.green
..strokeWidth = 2.0..style = PaintingStyle.stroke);
save/restore 保存/恢復
??????save/savelayer 即保存當前畫布，restore 即恢復當前畫布剿涮，也可以理解為清空重新繪制言津；save/restore 可以多次，以棧的方式存儲取试，可以通過進棧/出棧到當具體某一層悬槽；但是小菜測試時發(fā)現(xiàn)與 save/restore 需要成對出現(xiàn)，否則回報不匹配異常瞬浓；
canvas.clipRect(Rect.fromLTWH(40, 40, Screen.width - 80, Screen.width - 80));
canvas.drawColor(Colors.green, BlendMode.srcIn);
// 保存畫布1
canvas.save();
canvas.clipRect(
Rect.fromLTWH(60, 60, Screen.width - 120, Screen.width - 120));
canvas.drawColor(Colors.grey, BlendMode.srcIn);
// 保存畫布2
canvas.save();
canvas.clipRect(
Rect.fromLTWH(80, 80, Screen.width - 160, Screen.width - 160));
canvas.drawColor(Colors.orange, BlendMode.srcIn);
// canvas.save();
// 恢復畫布1
canvas.restore();
// 恢復畫布2
canvas.restore();
// canvas.restore();
canvas.drawColor(Colors.blue, BlendMode.srcIn);
??????Canvas 非常強大初婆，還有很多研究不透徹的地方，小菜仍在不斷學習猿棉，有錯誤的地方煩請多多指點磅叛！
來源：阿策小和尚
