canvas实现绘制吃豆鱼效果

2024-09-29 20:28:14

话不多说，请看代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas吃豆鱼</title>
 </head>
 <style>
 body{
 text-align:center;
 }
 canvas{
 background: #efefef;
 }
 </style>
 <body>
 <h1>
 角度转为弧度：<br />
 弧度=2*PI*角度/360=角度*PI/180
 </h1>
 <!--画布的宽和高只能使用属性，不能使用样式-->
 <canvas id='a1' width="500" height="400"></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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

js+canvas实现动态吃豆人效果

效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>吃豆人V01</title> </head> <body> <canvas id="canvas" width="500px" height="500px&
canvas实现绘制吃豆鱼效果

话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas吃豆鱼</title> </head> <style> body{ text-align:center; } canvas{ background: #efefef; } </style> <body> <h1
基于Flutter制作一个吃豆人加载动画

目录效果图绘制静态吃豆人.豆豆.眼睛加入动画属性总结效果图国际惯例,先看效果图: 具体效果就是吃豆人会根据吃不同颜色的豆子改变身体的颜色. 绘制静态吃豆人.豆豆.眼睛首先,我们需要将这个静态的吃豆人绘制出来,我们可以把吃豆人看做是一个实心圆弧,豆豆和眼睛就是一个圆. 关键代码: //画头 _paint ..color = color.value ..style = PaintingStyle.fill; var rect = Rect.fromCenter( center: Off
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p
canvas绘制刮刮卡效果

本文实例为大家分享了canvas绘制刮刮卡效果的具体代码,供大家参考,具体内容如下先上图代码 <!DOCTYPE html> <html> <head> <meta name="keywords" content="风舞红枫,前端技术,canvas"/> <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,no
JS+HTML实现经典游戏吃豆人

目录前言 HTML代码 JS代码游戏截图前言很早就知道canvas,当时一直没应用到,最近闲来无事就顺便写写看.吃豆游戏可以说是我们80,90后共同的回忆录,小时候常常在学习机上玩,所以也就有了强烈的欲望去写.为了写这个游戏,看了很多吃豆人游戏的相关信息,包括游戏规则,历史,其它相关游戏设计.又去了各个小游戏平台玩了下,找些灵感!!!就连最简单的配色,也是反复斟酌几个小时确定的方案……哈哈,不容易啊代码分两部分,游戏引擎和游戏主程序,引擎用来类的定义,管理动画场景,事件定义等等……游戏主
js+canvas简单绘制圆圈的方法

本文实例讲述了js+canvas简单绘制圆圈的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh
canvas快速绘制圆形、三角形、矩形、多边形方法介绍

想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:http://wd.jb51.net:81//201612/yuanma/About-Canvas-master_jb51.rar 从本篇文章开始,我会分享给大家canvas绘制的各种基础图形和酷炫的图形,注意:是一系列!欢迎关注! 后续每篇文章我会着重分享给大家一些使用Canvas开发的实例和这些实例的实现思路. 本文看点:
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5.个人还是比较推荐chrome,这个效果在Firefox下也会稍卡. 效果图: 演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

canvas实现绘制吃豆鱼效果

相关推荐

随机推荐