<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. hiho Mission Impossible 6（模拟 未提交验证。。）

    题意:模拟文本操作 思路:模拟 #include<iostream> #include<stdio.h> #include<string.h> using name ...

  2. VC++静态连接库

    目录 第1章静态连接库    1 1.1 同名函数的选择    1 1.2 模块合并    2 1.2.1 模块替换    4 1.3 内联函数    4 第1章静态连接库 静态连接库与动态连接库一样 ...

  3. 【POJ 1151】 Altlantis

    [题目链接] 点击打开链接 [算法] 线段树扫描线 推荐一篇比较容易理解的线段树扫描线的文章 : https://blog.csdn.net/u013480600/article/details/22 ...

  4. DDK编写64位驱动时加入x64汇编的方法

    上篇讲了如何在编写x64应用程序时加入x64汇编,这里来说说如何在编写x64驱动时加入x64汇编. 一.在asm文件中单独编写功能函数 比如要实现一个64位的加法函数,原型如下: ULONG64 my ...

  5. SVN进行代码的托管

    svn 使用的是集中服务器 就是只有一个服务器的意思 git 是分布式服务器  服务器: 存储客户端上传的源代码. 可以在Windows上通过安装 Visual SVN Sever .  客户端: 上 ...

  6. Windows下findstr命令的使用

    命令:findstr 参数解释 /b          如果位于行的开头则匹配模式. /e         如果位于行的末尾则匹配模式. /l         使用文字搜索字符串. /r        ...

  7. redis简介、安装、配置和数据类型

    redis简介.安装.配置和数据类型 redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理. 它支持字符串.哈希表.列表.集合.有序集合, ...

  8. Eclipse中快速重写(Override)基类方法的技巧（转载)

    转自:http://blog.csdn.net/guolin_blog/article/details/11952435 在Android开发过程中会引用大量的标准库,还要通过Override基类函数 ...

  9. Golang 读写锁RWMutex 互斥锁Mutex 源码详解

    前言 Golang中有两种类型的锁,Mutex (互斥锁)和RWMutex(读写锁)对于这两种锁的使用这里就不多说了,本文主要侧重于从源码的角度分析这两种锁的具体实现. 引子问题 我一般喜欢带着问题去 ...

  10. NGUI Tween几种用法随手记

    需要明确下几种动画的用法 play begin EventDelegate.add TweenPlayer ---------------------------------------------- ...