<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. 织梦文章分页后文章title的修改使得不一致

    织梦Dedecms是一个不错的建站cms系统,最近在用织梦建站的时候发现文章分页后,每个分页都是同一个标题,不利于优化,想在分页后面加上一个数字来进行区别,怎么做呢? 找到include/arc.ar ...

  2. oracle：rman恢复----通过时间set until time

    试验计划:先做一个0级备份,再创建一个表,插入几条数据,最后删除表,然后通过rman把该表的数据恢复. 试验环境:在归档模式,oracle10.2.0.1 开始试验: 1.rman level 0备份 ...

  3. Android font

    ╔════╦════════════════════════════╦═════════════════════════════╗ ║ ║ FONT FAMILY ║ TTF FILE ║ ╠════ ...

  4. LibSVM学习详细说明

    代码文件主要针对Matlab进行说明,但个人仍觉得讲解的支持向量机内容非常棒,可以做为理解这一统计方法的辅助资料; LibSVM是台湾林智仁(Chih-Jen Lin)教授2001年开发的一套支持向量 ...

  5. 【Codeforces 582A】 GCD Table

    [题目链接] 点击打开链接 [算法] G中最大的数一定也是a中最大的数.          G中次大的数一定也是a中次大的数. 第三.第四可能是由最大和次大的gcd产生的 那么就不难想到下面的算法: ...

  6. Centos6.5 6.6 （均可） 重置密码或强行破解root密码 简单操作

    centos忘记root密码怎么重置root密码? 使用Linux系统的时候root密码是十分关键的安全机制. 但是假设那天丢失了root密码的话问题就严重了. 百牛信息技术bainiu.ltd整理发 ...

  7. 打印斐波那契（Fibonacci）数列

    需求:打印 Fibonacci数列 思路: 当前项的值等于前两项数值的和 F=(F-1)+F(F-2) 样例: 输入:10 输出:1 1 2 3 5 8 13 21 34 55 辗转相加法实现 #in ...

  8. 用 SDL2 处理精灵图

    上面就是一个精灵图,由多个固定间隔的图标组成.利用精灵图的好处就是不必将图标逐个读入内存进行操作.我们可以将精灵图中需要的部分用一个个矩形截取下来,然后再输出到渲染器上. 环境:SDL2 + VC++ ...

  9. 《Eye In-Painting with Exemplar Generative Adversarial Networks》论文阅读笔记

    Abstract 基于conditional GAN使用隐藏在reference image中的exemplar information生成high-quality,personalized in-p ...

  10. excel中需要熟练掌握技能

    一.排版篇: 给他人发送excel前,请尽量将光标定位在需要他人首先阅览的位置,例如Home位置(A1),例如结论sheet,长表尽量将位置定位到最顶端 有必要的时候请冻结首行:没必要但可追究的内容, ...