<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. 高cpu分析

    http://www.blogjava.net/hankchen/archive/2012/05/09/377735.html http://www.open-open.com/lib/view/op ...

  2. 通过powershell操作eventlog

    relevant command list ~\Desktop> (Get-Command Write-EventLog).Parameters Key Value --- ----- Warn ...

  3. 转：Oracle:删除表空间

    原文:http://space.itpub.net/40239/viewspace-365948 OMF和非OMF管理的数据文件在DROP TABLESPACE时是否会自动删除,做了测试: SQL&g ...

  4. 转：Apache-Tomcat各发布包说明

    下载地址:http://tomcat.apache.org/发布包说明: apache-tomcat-[version].zip---------------------------基本发布包.这些发 ...

  5. Python(2)(基本输入输出语句)

    我们先来说输出:

  6. Redis和StackExchange.Redis

    redis有多个数据库1.redis 中的每一个数据库,都由一个 redisDb 的结构存储.其中,redisDb.id 存储着 redis 数据库以整数表示的号码.redisDb.dict 存储着该 ...

  7. sublime text 3 安装vue 语法插件

    1.下载https://github.com/vuejs/vue-syntax-highlight,点击这里也可以下载压缩包 2.解压到C:\Users\***\AppData\Roaming\Sub ...

  8. 安装ubuntu gnome 16.04后的一些操作

    好吧...其实安装了挺久了,记录一下以防忘记... 1.软件 chrome浏览器 唔..自己去官网下吧.. gnome tweak tool 不用多说,必备 sudo apt-get install  ...

  9. nodejs URL 详解

    1 我们可以使用.parse方法来将一个URL字符串转换为URL对象 例如: url.parse('http://user:pass@host.com:8080/p/a/t/h?query=strin ...

  10. React 从入门到进阶之路（八）

    之前的文章我们介绍了 React中的组件.父子组件.React props父组件给子组件传值.子组件给父组件传值.父组件中通过refs获取子组件属性和方法.接下来我们将介绍 React propTyp ...