刚学javascript,用canvas画了个人头,感觉代码好多。。求教,要怎么简化呀

dfmily27
  • 141
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>canvas</title>

        <style>
            #myCanvas {
                margin: 0 auto;
                border: 1px solid #666;
                display: block;
            }
        </style>
    </head>

    <body>
        <canvas id="myCanvas" width="600" height="800">您的浏览器不支持 HTML5 canvas 标签。</canvas>
        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");

            ctx.beginPath();
            ctx.arc(300, 200, 100, 0, 2 * Math.PI);
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(250, 180, 10, 0, 2*Math.PI);
            ctx.stroke();


            ctx.beginPath();
            ctx.arc(350, 180, 10, 0, 2*Math.PI);
            ctx.stroke();


            ctx.beginPath();
            ctx.arc(250, 185, 5, 0, 2*Math.PI);
            ctx.fillStyle="black";
            ctx.fill();
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(350, 185, 5, 0, 2*Math.PI);
            ctx.stroke();
            ctx.fillStyle="black";
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(260,250);
            ctx.bezierCurveTo(260,250,290,300,345,250);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(265,294);
            ctx.lineTo(265,315);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(335,294);
            ctx.lineTo(335,315);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(265,315);
            ctx.bezierCurveTo(305,305,310,310,335,315);
            ctx.stroke();



        </script>
    </body>

</html>
回复
阅读 5.7k
3 个回答
lazyboy
  • 1.5k
✓ 已被采纳

从学习的角度讲:简单而言,你要学会封装,从而实现代码的复用
从实用的角度讲:你应该学会从网上找一些现成的底层库(就是实现一些下面说的封装逻辑)来实用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>canvas</title>

        <style>
            #myCanvas {
                margin: 0 auto;
                border: 1px solid #666;
                display: block;
            }
        </style>
    </head>

    <body>
        <canvas id="myCanvas" width="600" height="800">您的浏览器不支持 HTML5 canvas 标签。</canvas>
        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");


                        // 封装点的概念
                        var point = function(x, y) {
                            var point = {};
                            point.x = x;
                            point.y = y;
                            return point;
                        }

                        // 封装画圆的逻辑
                        function draw_arc(point, radius, bound) {
                            ctx.beginPath();
                            ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
                            if(bound) {
                                ctx.fillStyle=bound;
                                ctx.fill();
                            }
                            ctx.stroke();
                        }

                      // 脸
                        draw_arc(point(300, 200), 100);

                      // 眼球
                        function draw_eye(point) {
                            draw_arc(point, 10);
                            point.y += 5;
                        draw_arc(point, 5, 'black');
                        }

                        draw_eye(point(250, 180));
                      draw_eye(point(350, 180));

                      //画曲线
                        function draw_bezier(point1, point2, point3) {
                            ctx.beginPath();
                            ctx.moveTo(point1.x,point1.y);
                            ctx.bezierCurveTo(point1.x,point1.y,point2.x,point2.y,point3.x,point3.y);
                            ctx.stroke();
                        }

                      draw_bezier(
                            point(260,250),
                            point(290,300),
                            point(345,250)
                        );

                      //划线
                        function draw_line(point_start, point_end) {
                            ctx.beginPath();
                            ctx.moveTo(point_start.x, point_start.y);
                            ctx.lineTo(point_end.x, point_end.y);
                            ctx.stroke();
                        }
                        draw_line(point(265,294), point(265,315));
                        draw_line(point(335,294), point(335,315));

                        draw_bezier(
                            point(305,305),
                            point(310,310),
                            point(335,315)
                        );

        </script>
    </body>

</html>

使用基于 canvas 的 js 库,来简化绘制。

以父之名
  • 1
新手上路,请多包涵

图片描述

这个人脸椭圆框 怎么画啊

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏