本篇教程探讨了HTML5+CSS3从入门到精通 如何纯绘制雨伞、飞机、五角星、桃心，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

由于网上很多都是用很多算法和逻辑使用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>

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！