canvas画笑脸
<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>
效果如下：
最新文章
- Javascript之自定义事件
- servlet的匹配规则，兼谈/与/*
- Postgresql死锁处理
- 提高SQL查询效率(SQL优化)
- 仅IE6/7中添加checked为true的input到DOM中为false
- 关于Eclipse(MyEclipse)中一次性批量导入多个项目Project.
- centos install（160112更新）
- xml学习总结（一）
- Linq学习之旅——LINQ查询表达式
- CentOS7--Xshell网络中断引起的vi编辑文件问题
- 【贪心+中位数】【UVa 11300】 分金币
- iptables 简单配置
- JProgressBar的一个框架
- Android在真机调试的设置方法
- Android -- 仿小红书欢迎界面
- freemarker写select组件（二）
- git添加/删除远程仓库
- 插值代码17个---MATLAB
- ATS的curl清除缓存
- Excel破解密码代码