<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. 计算一个大数n的阶乘的位数宽度（十进制）（log i累加法 ）

    输入: 每行输入1个正整数n, (0<n<1000 000) 输出: 对于每个n,输出n!的(十进制)位数. 分析: 这道题采用蛮力法.根据定义,直接求解! 所谓n!的十进制位数,就是 l ...

  2. uptime命令

    uptime命令能够打印系统总共运行了多长时间和系统的平均负载.uptime命令可以显示的信息显示依次为:现在时间.系统已经运行了多长时间.目前有多少登陆用户.系统在过去的1分钟.5分钟和15分钟内的 ...

  3. AutoEventWireup

    Page_PreInit & OnPreInit - whats the difference? https://forums.asp.net/t/1095903.aspx?Page_PreI ...

  4. codeforces 690C3 C3. Brain Network (hard)(lca)

    题目链接: C3. Brain Network (hard) time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  5. C/C++ 编译器优化

    0. gcc -o gcc -o 的优化仍然是机械的,想当然的.只有做到深入理解计算机系统,加深对编程语言的理解,才能写出最优化的代码. Linux下gcc 优化等级的介绍 gcc -o0 ⇒ 不提供 ...

  6. web自动化测试的自身特点

    1.web页面是出现的元素可能具有不确定性 2.不同操作系统上不同web浏览器之间的兼容性 3.web应用的高并发性和容错性 4.移动设备上web客户端兼容性,旋转下和各种触摸特性

  7. 洛谷P3354 [IOI2005]Riv 河流——“承诺”DP

    题目:https://www.luogu.org/problemnew/show/P3354 状态中要记录一个“承诺”,只需相同承诺之间相互转移即可: 然后就是树形DP的套路了. 代码如下: #inc ...

  8. NSCoding

    在IOS的开发中,小数据量的持久化都用NSUserDefaults来实现,但是NSUserDefaults只能保存NSString, NSNumber, NSDate, NSArray, NSDict ...

  9. 【转】Chrome headless 模式

    原文地址: http://www.cnblogs.com/fnng/p/7797839.html 我们在通过Selenium运行自动化测试时,必须要启动浏览器,浏览器的启动与关闭必然会影响执行效率,而 ...

  10. UVaLive 6588 && Gym 100299I (贪心+构造)

    题意:给定一个序列,让你经过不超过9的6次方次操作,变成一个有序的,操作只有在一个连续区间,交换前一半和后一半. 析:这是一个构造题,我们可以对第 i 个位置找 i 在哪,假设 i  在pos 位置, ...