如何使用canvas画一个微笑的表情（代码示例）

实习期间让我用canvas画一个表情，比较简单，话不多说直接上代码：

body>
    div id="canvas-warp">
        canvas id="canvas" style="display: block;
     margin: 200px auto;
    ">
            你的浏览器居然不支持Canvas!    /canvas>
    /div>
    script>
    window.onload = function () {
            VAR canvas = document.getElementById("canvas");
            canvas.width = 400;
            canvas.height = 400;
            //获取上下文        var context = canvas.getContext("2d");
        //用于画有填充色圆的函数  参数分别为圆心坐标 ，半径，起始与终止位置，线颜色，填充颜色        function drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) {
                context.beginPath();
                context.arc(x2, y2, r2, a2, b2 * Math.PI);
                context.strokeStyle = lineColor;
                context.fillStyle = FillColor;
                context.fill();
     //确认填充            context.stroke();
        }
    ;
        //用于画圆弧函数 默认线条为黑色 无填充 参数分别为：圆心x坐标，圆心y坐标，半径，开始位置，终止位置        function drawsArc(x, y, r, l1, l2) {
                context.beginPath();
                context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI);
                context.strokeStyle = "black";
                context.stroke();
        }
    ;
        //用于画眼睛的函数        function darwEyes(x1, y1, a1, b1) {
     //参数分别为椭圆圆心位置 长轴  短轴            context.strokeStyle = "#754924"            ParamEllipse(context, x1, y1, a1, b1);
 //椭圆            function ParamEllipse(context, x, y, a, b) {
                    //使每次循环所绘制的路径（弧线）接近1像素                var step = (a >
     b) ? 1 / a : 1 / b;
                    context.beginPath();
                    context.moveTo(x + a, y);
     //从椭圆的左端点开始绘制                for (var i = 0;
     i  2 * Math.PI;
 i += step) {
                        //参数为i，表示度数（弧度）                    context.lineto(x + a * Math.cos(i), y + b * Math.sin(i));
                }
                    context.closePath();
                    context.fillStyle = "#754924";
                    context.fill();
                     context.stroke();
            }
    ;
        }
    ;
            //脸        drawCircle(200, 200, 200, 0, 2, "#EEE685", "#fcf200");
            //左眼        context.strokeStyle = "#754924"        darwEyes(116, 130, 18, 25);
            drawCircle(110, 127, 12, 0, 2, "#754924", "#F5F5F5");
            //右眼        darwEyes(296, 130, 18, 25);
            drawCircle(290, 127, 12, 0, 2, "#754924", "#F5F5F5");
            //左眉毛        drawsArc(100, 100, 50, 1.3, 1.7);
            //右眉毛        drawsArc(300, 100, 50, 1.3, 1.7);
            //嘴巴        drawsArc(200, 120, 180, 0.3, 0.7);
    }
    /script>
    body>
    

以上就是如何使用canvas画一个微笑的表情（代码示例）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！