• 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~

  • 相关阅读:
    DButils工具类能够用来获取数据库连接向数据库插入更新删除对象
    Android 实现ActionBar定制
    查看CentOs6.5/7的系统版本号
    安装Was liberty之步骤
    在centOS上安装VNC
    SCP远程拷贝命令
    Was liberty资料总结
    罗杰斯:做你喜欢的工作,你会变成个有钱人
    【Java/csv】一个CSV文件解析类(转载)
    当你的才华还撑不起你的野心时,那你就应该静下心来学习。
  • 原文地址:https://www.cnblogs.com/zerofc/p/8710145.html
Copyright © 2020-2023  润新知