<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 详解如何用canvas画一个微笑的表情

          发布时间:2019-03-14 15:11:37   作者:Youki   我要评论

        这篇文章主要介绍了详解如何用canvas画一个微笑的表情的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

        实习期间让我用canvas画一个表情,比较简单,?#23433;?#22810;说直接上代码:

        <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");
                //用于画有填充色圆的函数  参数?#30452;?#20026;圆心坐标 ,半径,起始与终止位置,线颜色,填充颜色
                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();
                };
                //用于画?#19981;?#20989;数 默认线条为黑色 无填充 参数?#30452;?#20026;:圆心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) { //参数?#30452;?#20026;椭圆圆心位置 长轴  短轴
                    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); //从椭圆的左?#35828;?#24320;始绘制
                        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绘制表情包的示例代码

          这篇文章主要介绍了canvas绘制表情包的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2018-07-09

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>