Community
Learn
Tools Library
AI Tools
Leisure
search
English
html5 - 刚学javascript，用canvas画了个人头，感觉代码好多。。求教，要怎么简化呀
高洛峰
高洛峰 2017-04-10 15:18:13
0
2
190
<!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>
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

reply all(2)
Ty80
Ty802017-04-10 15:20:13 2 floor

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

<!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>
Like +0
Add Reply
小葫芦
小葫芦2017-04-10 15:20:13 1 floor

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

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template