<style>
body {
   background: black;
   text-align: center;
}
#cans {
   background: white;

}
</style>
<script>
    window.onload=function(){
    let OC=document.getElementById("cans");
    let ctx=OC.getContext("2d");
   ctx.arc(600,400,200,0,360,false);//一个大圆（起点坐标，起点坐标，半径，起始弧度，结束弧度，是否逆时针）逆时针为true，顺时针false
   ctx.stroke();//描边
   ctx.beginPath();//防止之前画好的部分受后面画的影响
   ctx.arc(500,330,20,0,360,false);//左眼睛
   ctx.stroke();//描边
   ctx.beginPath();//防止之前画好的部分受后面画的影响
   ctx.arc(700,330,20,0,360,false);//右眼睛
   ctx.stroke();//描边
   ctx.beginPath(); //防止之前画好的部分受后面画的影响
   ctx.arc(600,430,100,(120-90)*Math.PI/180,(240-90)*Math.PI/180,false);//嘴巴，画弧线，弧度=度数-90
   ctx.stroke();//描边

}
</script>

<body>
   <input type="color" id="c1"><br />
   <canvas id="cans" height="800" width="1200">该浏览器不支持canvas元素操作,请更新浏览器</canvas>
</body>

效果如下：

canvas画笑脸的更多相关文章

  1. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  2. Android利用canvas画各种图形 及Paint用法 .

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  3. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  4. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  5. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  6. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  8. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

随机推荐

  1. 【转】使用git 工具下载android.jar Source Code

    为了开发android应用,在开发时发现sdk没有源代码,这样在开发时太麻烦了,下面说说如何下载源代码,以及如何配置. 下载源代码需要git,先下载一个git.下面的操作都是在windows下完成的. ...

  2. SDUT 周赛 神奇的树（简单题 注意数据类型的溢出 ）

    神奇的树 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 SDUT有一颗神奇的苹果树.假如某天早上这树上有x个苹果,那么这树这一天 ...

  3. 设置linux服务器下开放端口

    查询 netstat -anp  所有开放端口信息 二.关闭端口号: iptables -A OUTPUT -p tcp --dport 端口号-j DROP 三.打开端口号: iptables -A ...

  4. java nio的一个严重BUG

    java nio的一个严重BUG Posted on 2009-09-28 19:27 dennis 阅读(4588) 评论(5)  编辑  收藏 所属分类: java .源码解读      这个BU ...

  5. ubuntu中使用apt-get安装zbar

    apt-get是linux中常用的shell命令,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统.apt-get命令一般需要root权限执行,所以 ...

  6. SPOJ:Strange Waca(不错的搜索&贪心&剪枝)

    Waca loves maths,.. a lot. He always think that 1 is an unique number. After playing in hours, Waca ...

  7. SPOJ_705_New Distinct Substrings_后缀数组

    SPOJ_705_New Distinct Substrings_后缀数组 题意: 给定一个字符串,求该字符串含有的本质不同的子串数量. 后缀数组的一个小应用. 考虑每个后缀的贡献,如果不要求本质不同 ...

  8. 开发微信小程序入门前

    开发微信小程序入门前 百牛信息技术bainiu.ltd整理发布于博客园 2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅.个大新闻.论坛都在讨论这个事情. 作为互联 ...

  9. Laravel 5 微信小程序扩展

    小程序官方的加解密 SDK 已经非常清楚了,只不过改成 Laravel 风格而已,仅仅相当于搬砖工.至于重复造轮子,我发现其他人的扩展解密用户信息的时候代码出错了,并且需要安装一个 Laravel 的 ...

  10. win7下出现'telnet' 不是内部或外部命令，也不是可运行的程序或批处理文件的解决方法

    在win7竟然不可能使用telnet命令,使用时会出现“'telnet' 不是内部或外部命令,也不是可运行的程序或批处理文件”,研究了很多,才终于明白WIN7默认是没有安装这个命令. 处理办法: 依次 ...