由於網上很多都是用很多演算法和邏輯使用canvas進行繪製，但有時也無法解決一些小眾需求。 ...
由於網上很多都是用很多演算法和邏輯使用canvas進行繪製，但有時也無法解決一些小眾需求
。
為了滿足需求不能寫運算純手寫，感覺真的很浪費時間，只有自己踩過的坑，才不想看到別人也被坑。我很懶，也想過弄個工具，目前先放代碼吧，方便需要的人copy。
<canvas> H5標簽，只是圖形容器，您必須使用腳本來繪製圖形。
lineTo() 方法 添加一個新點，然後創建從該點到畫布中最後指定點的線條
bezierCurveTo() 方法 通過使用表示三次貝塞爾曲線的指定控制點，向當前路徑添加一個點
提示：三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算中的控制點，第三個點是曲線的結束 點。曲線的開始點是當前路徑中最後一個點。如果路徑不存在，那麼請使用 beginPath() 和 moveTo() 方 法來定義開始點。
說明：網上有高級演算法的繪製，很靈活也很方便，如果不是特使情況，千萬別用我的方法，請上網右轉看別人的案例，哈哈。
☆ canvas畫布節點(僅供參考)
<canvas id="myCanvas" width="264" height="264" style="border:red 1px solid;position:absolute;top:0;left:0"></canvas>
1. 雨傘
<script type="text/javascript">
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var ctx=canvas.getContext('2d');
ctx.beginPath();
// 小雨點
ctx.moveTo(47,32);
ctx.bezierCurveTo(40,42,38,56,46,60);
ctx.bezierCurveTo(64,52,50,40,47,32);
// 大雨點
ctx.moveTo(78,32);
ctx.bezierCurveTo(70,44,62,66,78,70);
ctx.bezierCurveTo(104,60,80,40,78,32);
// 傘身
ctx.moveTo(44,118);
ctx.bezierCurveTo(48,114,50,90,72,76);
ctx.bezierCurveTo(82,82,104,70,102,54);
ctx.bezierCurveTo(138,26,222,76,224,118);
ctx.lineTo(146,118);
ctx.lineTo(146,200);
ctx.bezierCurveTo(147,212,162,216,162,192);
ctx.bezierCurveTo(168,188,172,186,178,192);
ctx.bezierCurveTo(180,200,182,218,162,231);
ctx.bezierCurveTo(154,240,116,226,122,200);
ctx.lineTo(122,118);
ctx.lineTo(44,118);
var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
gradient.addColorStop(0,"rgba(244,28,285,0.1)");
gradient.addColorStop(1,"rgba(255,255,255,1)");
ctx.strokeStyle = "red"; //設置或返回用於筆觸的顏色、漸變
ctx.stroke();
ctx.fillStyle=gradient;
ctx.fill();
}
</script>
2. 飛機
<script type="text/javascript">
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(65,50);
ctx.lineTo(156,70);
ctx.lineTo(190,38);
ctx.bezierCurveTo(222,10,250,40,230,70);
ctx.lineTo(195,106);
ctx.lineTo(218,204);
ctx.lineTo(186,228);
ctx.lineTo(150,146);
ctx.lineTo(110,186);
ctx.bezierCurveTo(118,200,126,220,98,234);
ctx.lineTo(30,162);
ctx.bezierCurveTo(30,134,70,140,78,152);
ctx.lineTo(118,114);
ctx.lineTo(40,78);
ctx.lineTo(65,50);
/*ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,22,62.5,22,55);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,128,55);
ctx.bezierCurveTo(128,55,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);*/
var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
gradient.addColorStop(0,"rgba(244,28,285,0.1)");
gradient.addColorStop(1,"rgba(255,255,255,1)");
ctx.strokeStyle = "red"; //設置或返回用於筆觸的顏色、漸變
ctx.stroke();
ctx.fillStyle=gradient;
ctx.fill();
}
</script>
3. 五角星
<script>
//function init() {
var canvas = document.getElementById('stars');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#827839";
//ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 12;
ctx.shadowBlur = 18;
// 開始一條新路徑
ctx.beginPath();
/*ctx.moveTo(15,150) +30 -8
ctx.lineTo(100,140); // 2
ctx.lineTo(170,80); // 3
ctx.lineTo(230,140); // 4
ctx.lineTo(315,150); // 5
ctx.lineTo(230,200); // 6
ctx.lineTo(300,263); // 7
ctx.lineTo(170,220); // 8
ctx.lineTo(30,263); // 9
ctx.lineTo(100,200); // 10
//ctx.lineTo(15,150); // 結束
ctx.closePath();
ctx.fill();*/
ctx.moveTo(45,142); // 起點
ctx.lineTo(129,126); // 2
ctx.lineTo(172,40); // 3
ctx.lineTo(215,126); // 4
ctx.lineTo(299,142); // 5
ctx.lineTo(240,203); // 6
ctx.lineTo(252,288); // 7
ctx.lineTo(172,252); // 8
ctx.lineTo(92,288); // 9
ctx.lineTo(105,203); // 10
//ctx.lineTo(15,150); // 結束
ctx.closePath();
ctx.fill();
//}
//window.addEventListener("load",init.false);
</script>
4. 桃心
<script type="text/javascript">
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,22,62.5,22,55);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,128,55);
ctx.bezierCurveTo(128,55,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
gradient.addColorStop(0,"rgba(244,28,285,0.5)");
gradient.addColorStop(1,"rgba(255,255,255,1)");
ctx.fillStyle=gradient;
ctx.fill();
}
</script>
個人公眾號(ZEROFC_DEV)，關於web開發的，歡迎關註O(∩_∩)O~
