canvas绘制小人开口和闭口
css:
<style>
body{
text-align: center;
}
canvas{
background: #ddd;
}
</style>
canvas标签:
<canvas id="canvas" width="500" height="400"></canvas>
js:
var elem = document.getElementById("canvas");
var canvas = elem.getContext("2d");
//开始路径
//张嘴函数
function openMouth(){
canvas.beginPath();
canvas.arc(250,200,100,30*Math.PI/180,330*Math.PI/180);
canvas.lineTo(250,200);
canvas.fillStyle = "yellow";
canvas.fill();
canvas.closePath();
canvas.stroke();
//眼睛
canvas.beginPath();
canvas.arc(270,150,25,Math.PI*2,false);
canvas.fillStyle = "#38f";
canvas.fill();
canvas.stroke();
//眼神
canvas.beginPath();
canvas.arc(275,140,8,Math.PI*2,false);
canvas.fillStyle = "white";
canvas.fill();
canvas.stroke();
}
//openMouth();
//闭嘴函数
function closeMouth(){
canvas.beginPath();
canvas.arc(250,200,100,0,2*Math.PI);
canvas.fillStyle = "orange";
canvas.fill();
canvas.lineTo(250,200);
canvas.stroke();
//眼睛
canvas.beginPath();
canvas.arc(260,150,25,Math.PI*2,false);
canvas.fillStyle = "#38f";
canvas.fill();
canvas.stroke();
//眼神
canvas.beginPath();
canvas.arc(270,145,8,Math.PI*2,false);
canvas.fillStyle = "white";
canvas.fill();
canvas.stroke();
}
// closeMouth();
//定是闭嘴或者张嘴
var index = 1 ;
var timer = setInterval(function(){
canvas.clearRect(0,0,500,400);
index ++;
if(index%2==0){
openMouth();
}else{
closeMouth();
}
},1000);
canvas绘制小人开口和闭口的更多相关文章
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...
随机推荐
- Hadoop运行模式:本地模式、伪分布模式、完全分布模式
1.本地模式:默认模式 - 不对配置文件进行修改. - 使用本地文件系统,而不是分布式文件系统. - Hadoop不会启动NameNode.DataNode.ResourceManager.NodeM ...
- <每日一题> Day2:CodeForces-1141C.PolycarpRestoresPermutation(思维题)
原题链接 参考代码: #include <iostream> #include <cstring> using namespace std; + , INF = 0x3f3f3 ...
- [BZOJ 2989]数列(二进制分组+主席树)
[BZOJ 2989]数列(二进制分组+主席树) 题面 给定一个长度为n的正整数数列a[i]. 定义2个位置的graze值为两者位置差与数值差的和,即graze(x,y)=|x-y|+|a[x]-a[ ...
- python 字符串 string模块导入及用法
字符串也是一个模块,有自己的方法,可以通过模块导入的方式来调用 1,string模块导入 import string 2, 其用法 string.ascii_lowercase string.dig ...
- P5443 [APIO2019]桥梁
传送门 子任务 $4$ 告诉我们可以离线搞带权并查集 从大到小枚举询问,从大到小连边 如果没有修改操作就可以过了 但是有修改,考虑最暴力的暴力,搞可撤销并查集 同样先离线,从大到小处理询问时,按原边权 ...
- 多个nginx之间如何实现反向代理和负责均衡
1)nginx反向代理: http { upstream routeadmin { ip_hash; server 127.0.0.1:9201 weight= ...
- Python之文件的读
python中文件的读操作:以只读的形式打开文件->逐行读取文件中的内容->关闭文件 代码如下 #文件的读 f = file(u'F:\\python\\homework.txt', 'r ...
- zabbix3.4.8中提示host [4gronghe_110] not found
查看zabbix_agentd.log时出现下列错误 [root@4gronghe_110 ~]# tail /var/log/zabbix/zabbix_agentd.log 1266:2014 ...
- 2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板
基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板 综合图像处理硬件平台包括图像信号处理板2块,视频处理板1块,主控板1块,电源板1块,VPX背 ...
- 使用BaGet来管理内部Nuget包
有的时候,我们想要制作一些nuget包,供自己内部调用,不想公开出去,那么就需要一个能够集中管理nuget包的服务了,今天我来给大家介绍一款轻便好用的包管理服务-----BaGet 下载并部署BaGe ...