详解如何用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实现的数字统计游戏
Nov 10 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
css3带你实现3D转换效果
Feb 24 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读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python烟花效果的代码实例
2020/02/25 Python
python实现logistic分类算法代码
2020/02/28 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
Ruby如何定义一个类
2012/10/08 面试题
优质的学校老师推荐信
2013/10/28 职场文书
入学生会自荐书范文
2014/02/05 职场文书
经典婚礼主持词
2014/03/13 职场文书
优秀员工演讲稿
2014/05/19 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
庆六一宣传标语
2014/10/08 职场文书
英文投诉信格式
2015/07/03 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书