详解如何用canvas画一个微笑的表情


Posted in HTML / CSS onMarch 14, 2019

实习期间让我用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画一个微笑的表情

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3进行截取替代js的substring
Sep 02 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 #HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 #HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 #HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 #HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 #HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 #HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 #HTML / CSS
You might like
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
javascript运动详解
2015/07/06 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
Python使用functools实现注解同步方法
2018/02/06 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
幼师自荐信范文
2013/10/06 职场文书
员工评语大全
2014/01/19 职场文书
《画》教学反思
2014/04/14 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
门店业绩提升方案
2014/06/08 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
一文搞懂python异常处理、模块与包
2021/06/26 Python
MySQL 数据类型详情
2021/11/11 MySQL