<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. MYSQL进阶学习笔记六：MySQL视图的创建，理解及管理！（视频序号：进阶_14,15)

    知识点七:MySQL视图的创建(14) 视图的定义: 什么是视图: 视图数由查询结果形成的一张虚拟的表. 什么时候要用到视图? 如果某个查询结果出现的非常频繁,也就是,要经常拿这个查询结果来做子查询. ...

  2. [置顶] SQL Server 2005 双机热备的实现

    [置顶] SQL Server 2005 双机热备的实现 分类: SQLSERVER2011-08-24 21:25 901人阅读 评论(0) 收藏 举报 sql servermicrosoftsql ...

  3. Python小练习_数据库表数据导出到excel

    需求:只要传入一个表名,就能把所有的数据导入出来,字段名是excel的表头 1.要动态获取到标的字段 cur.descrption能获取到表的字段 fileds = [filed[0] for fil ...

  4. hive 中 Order by, Sort by ,Dristribute by,Cluster By 的作用和用法

    order by order by 会对输入做全局排序,因此只有一个reducer(多个reducer无法保证全局有序) 只有一个reducer,会导致当输入规模较大时,需要较长的计算时间. set ...

  5. iOS 生成随机数

    arc4random 1.获取一个随机整数范围在:[0,100)包括0,不包括100 int x = arc4random() % 100; 2.  获取一个随机数范围在:[500,1000],包括5 ...

  6. [Selenium] Automation Test Manual(Selenium)

    http://www.cnblogs.com/puresoul/p/3483055.html http://www.360doc.com/content/14/0913/10/13497042_409 ...

  7. 状态空间搜索好题UVA10603

    题目 分析:注意这里求的是最少流量, 二不是最少步数!!!所以我们用优先队列去维护一个最小流量,然后进行bfs即可,解释一下一个重要的数组ans[i],表示的是杯子中的水为i时的最小流量 #inclu ...

  8. 【转】创建和使用ANDROID LIBRARY工程

    原文网址:http://www.cnblogs.com/Greenwood/archive/2011/06/19/2084499.html 摘要: 创建library供多个工程共享代码.资源是非常常见 ...

  9. cmake官方文档

    https://cmake.org/cmake/help/v3.0/genindex.html

  10. centos7安装redis3.2.12

    1.准备安装包,放在/usr/local/src/ 2.解压安装包,解压到/usr/local/ tar zxf redis-3.2.12.tar.gz -C /usr/local/ 3.cd /us ...