web前端学习部落:canvas绘制吃豆鱼_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

web前端学习部落:canvas绘制吃豆鱼

字号+ 作者：H5之家来源：H5之家 2017-01-18 13:05 我要评论( )

!DOCTYPEhtmlhtmlheadmetacharset=UTF-8titlecanvas吃豆鱼/title/headstylebody{te html,js,css,nodejs,前端开发,前端招聘,jquery,qianduan

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas吃豆鱼</title> </head> <style> body{ text-align:center; } canvas{ background: #efefef; }
</style> <body> 角度转为弧度：
弧度=2*PI*角度/360=角度*PI/180  <canvas></canvas> </body> </html>

<script> var ctx=a1.getContext('2d');//得到画布上的画笔并设置绘制方式 function openMouse(){ //绘制圆（3/4） ctx.beginPath();//开始一条路径 ctx.arc(250,200,100,45*Math.PI/180,315*Math.PI/180);//圆心为（250,200），半径为100 ctx.lineTo(250,200); ctx.closePath(); ctx.stroke();//勾勒轮廓/描边 ctx.fillStyle='#00ffff'; ctx.fill(); eye(); } //openMouse(); function closeMouse(){ ctx.beginPath();//开始一条路径 ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);//圆心为（250,200），半径为100 ctx.lineTo(250,200); ctx.closePath(); ctx.stroke();//勾勒轮廓/描边 ctx.fillStyle='#00ffff'; ctx.fill(); eye(); } //closeMouse(); //绘制公共部分眼睛 function eye(){ //绘制眼睛 ctx.beginPath(); ctx.arc(250,200-100/2,25,0,2*Math.PI);//眼睛半径为25 ctx.stroke(); ctx.fillStyle='#001900'; ctx.fill(); //绘制眼神光 ctx.beginPath(); ctx.arc(265,140,5,0,2*Math.PI);//眼神光半径为5 ctx.stroke(); ctx.fillStyle='#ffffff'; ctx.fill(); } var isOpen=true;//定义变量isOpen：是否张开 var timer=setInterval(function(){ var ctx=a1.getContext('2d'); ctx.clearRect(0,0,500,400);//清空画布大小 if(isOpen){ closeMouse(); isOpen=false; }else{ openMouse(); isOpen=true; } },500); </script>

有大量web前端开发学习工具及学习资料，可以搜群【 web前端学习部落22群】进行下载，遇到学习问题也可以问群内专家以及课程老师哟

　

前端前端开发 web前端 web前端开发

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章

如何学习web前端开发有没有什么技巧

2017-01-15 13:02
专注织梦网站建设,织梦建站教程,DEDE模板下载,织梦仿站

2017-01-15 09:00
最权威的1000集大型web前端视频教程（爱创课堂出品）

2016-11-06 16:05
学习Html5中的canvas元素的文本和路径

2016-11-05 16:00

网友点评

精彩导读

web前端学习部落:canvas绘制吃豆鱼

乐学网、搜索

高性能动画！HTML5 Canvas JavaScript框架Kin

JS生成二维码，允许中文转码

Canvas相关资料

热门资讯

关注我们

关注微信公众号，了解最新精彩内容

<