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~